想要获取对应id所上传的附件文档，使我们在点击对应的商家时显示出他所上传的附件文档，并可以点击查看
有一个 file-list 属性
把你要显示的文件填充给这个对象
格式：[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
【以下回答由 GPT 生成】
问题：如何使用el-upload组件在vue.js中实现上传文件并回显？
解决方案： 1. 首先，确保已经正确安装了Vue.js和Element UI，并且在Vue组件中引入了el-upload组件。
data() {
return {
fileList: [],
uploadedFiles: []
};
},
<el-upload
class="upload-demo"
:action="uploadUrl"
:file-list="fileList"
:auto-upload="false"
:on-change="handleChange"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="handleUpload">上传文件</el-button>
</el-upload>
handleChange(file, fileList) {
this.fileList = fileList;
},
handleUpload() {
const formData = new FormData();
this.fileList.forEach(file => {
formData.append('file', file.raw);
});
// 使用axios或其他网络库发送文件上传请求，并获取服务器返回的文件列表
// 示例使用axios进行文件上传请求
axios.post('/api/upload', formData).then(response => {
// 上传成功后，将服务器返回的文件列表保存到uploadedFiles数组中
this.uploadedFiles = response.data.files;
}).catch(error => {
console.log(error);
});
},
<el-card>
<div v-if="uploadedFiles.length > 0">
<h3>已上传文件列表：</h3>
<ul>
<li v-for="file in uploadedFiles" :key="file.id">
{{ file.name }}
<el-button size="small" type="text" @click="handleView(file.url)">查看</el-button>
</li>
</ul>
</div>
</el-card>
handleView(url) {
// 在新标签页或模态框中打开文件链接
window.open(url);
},
以上就是使用el-upload组件在Vue.js中实现上传文件并回显的步骤。根据具体的情况，可以对代码进行适当的调整。
【相关推荐】