问题描述
最近做的一个项目中,要求使用者可以手动上传商品的图片,上传成功后,服务器会返回给我们图片的保存路径,而我们需要把这个路径,保存到该条商品的对象中,实现商品和商品图的关联,而后再将包含商品图片路径的商品信息提交到后台。
但是我们通过element官网查阅upload组件的on-success的钩子中,只能传递 response, file, fileList 这三个参数,那么我们该怎样将商品的信息传递到这个函数中呢?
问题解决
<el-table-column label="图片">
<template slot-scope="scope">
<el-upload
:action="imgURL"
:on-success="
function (response) {
return imgHandleSuccess(response, scope.row) }">
<el-button size="small" type="primary">上传图片</el-button>
</el-upload>
</template>
</el-table-column>
可以看到,我们不再是直接为on-success 绑定一个定义在 methods中的方法,而是调用了一个匿名函数,将需要用到的服务器响应信息传递进去,然后在匿名函数内部中,我们再通过返回值调用一个函数的形式,将改行商品的记录传递过去。
这样我们便可以愉快的进行后续操作了~