![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a7da383a1639a051facbfd2baa962d09.png)
<el-card style="margin-top:15px">
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane
v-for="(item, index) in chooseList"
:key="index"
:label="item.label"
>
<div>
<el-upload
drag
action="http://xxx/upload/files"
:headers="headers"
:on-success="uploadSuccess1"
:on-preview="handlePreview1"
:on-remove="handleRemove1"
:before-remove="beforeRemove1"
multiple
:limit="5"
:file-list="item.fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击或将文件拖拽到这里上传</div>
<div class="el-upload__text">支持扩展名:rar.zip.doc.docx.pdf.jpg</div>
</el-upload>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
headers: { "access-token": window.localStorage.getItem("xxx_USER") },
{
value: 0,
label: "xxx",
fileList: [],
attachment: [],
},
{
value: 1,
label: "xxx",
fileList: [],
attachment: [],
},
uploadSuccess1(response) {
console.log("上传", response);
if (response.code == 200) {
this.chooseList[this.activeName].fileList = response.data.files;
this.chooseList[this.activeName].fileList.forEach((item) => {
this.chooseList[this.activeName].attachment.push(item.id);
});
this.$message.success("上传成功");
}
},
//点击图片,处理图片预览效果
handlePreview1(file) {
console.log("handlePreview", file);
},
//删除图片
handleRemove1(file, fileList) {
console.log("handleRemove", file, fileList);
this.chooseList[this.activeName].fileList = fileList;
// fileList.forEach(item => {
// this.addProjectForm.titlepic.push(item.id)
// })
this.chooseList[this.activeName].attachment = [];
},
beforeRemove1(file, fileList) {
return this.$confirm(`确定移除 ${file.name}?`);
},