使用el-upload实现上传功能,在表格里展示并上传,每次最少上传一组信息,最多5组, 通过on-success获取上传成功的值,但是选择多条的时候返回值每次都会覆盖,请问要通过什么方法来解决呢?
<el-table-column
prop="uploads"
label="上传文件"
>
<template slot-scope="scope">
<el-upload
class="upload-demo"
ref="upload"
:action="$http.adornUrl('/topUp/files/upload/upload')"
:headers="{ Authorization: $cookie.get('Authorization')}"
:limit="1"
name="file"
:on-success="uploadSuccess"
v-model="scope.row.uploads"
:file-list="files"
:auto-upload="true"
>
<div slot="tip" class="el-upload__tip"></div>
<template slot="trigger">
<div class="default-btn primary-btn">{{$t("product.selectFile") }}</div>
</template>
</el-upload>
</template>
</el-table-column>
foForm: {
// 添加的上传列表
data: [
{
name: '',
time: '',
uploads: ''
}
],
uploadSuccess (file) {
this.foForm.data[0].uploads = file.response;
},
问题出在每次选择多个文件时,v-model 绑定的 scope.row.upload 属性被最后一个文件的上传成功返回值覆盖了,因此 uploadSuccess 方法的赋值语句只会修改最后一个文件的返回值。要解决这个问题,可以将 v-model 绑定的 scope.row.upload 属性改成数组,这样每个文件的返回值就可以分别保存在数组的不同元素中。
修改代码如下:
<el-upload
class="upload-demo"
ref="upload"
:action="$http.adornUrl('/element')"
:headers="{ Authorization: $cookie.get('Authorization')}"
:limit="1"
name="file"
:on-success="uploadSuccess"
:file-list="files"
:auto-upload="true"
>
<div slot="tip" class="el-upload__tip"></div>
<template slot="trigger">
<div class="default-btn primary-btn">{{$t("product.selectFile") }}</div>
</template>
</el-upload>
data() {
return {
uploads: [] // 修改为数组
}
},
methods: {
uploadSuccess(file) {
this.uploads.push(file.response); // 保存到数组中
}
}
这样,每个文件上传成功后,其返回值就会分别保存在 uploads 数组的不同元素中。如果上传的文件数量不超过5个,那么数组的前5个元素就是每个文件的返回值。如果上传的文件数量超过5个,那么只有数组的后5个元素是最后5个上传文件的返回值。
如果对您有帮助,请给与采纳,谢谢。