在使用element-ui的时候,在后台的列表中需要循环添加上传口。但是element自带的回调方法只有两个参数,而我需要在回调方法中添加一个标识参数来区分当前上传后的结果来绑定。
列表中使用上传组件.png
最开始的想法是按照
<el-table-column prop="price" label="封面图" width="220">
<template slot-scope="scope">
<el-upload class="poster-uploader"
:action="imgUploadUrl" :show-file-list="false"
:on-success="handleBannerSuccess"
:before-upload="beforeBannerUpload">
<img v-if="scope.row.banner" :src="scope.row.banner" class="upload-banner">
<div v-else slot="trigger" class="u<pload-placeholer">上传封面</div>
</el-upload>
</template>
</el-table-column>
查看文档,参数的返回值有:
on-success 文件上传成功时的钩子 function(response, file, fileList)
然后尝试如下写法,
:on-success="handleBannerSuccess(index, $event)"
发现并不对。然后想起来这个是传入的回调函数,而不是一个监听事件。
如果是@on-success倒可以这个处理参数。
而现在参数是一个回调函数,那么就修改这个函数:
:on-success="function (res, file) { return handleBannerSuccess(res, file, scope.$index)}"
handleBannerSuccess(response, file, index) {
console.log(response, file, index);
}