VUE 页面包含多个upload组件时,获取当前使用upload的index

之前网上看到有这样的一个标题，但是没有具体说出解决的方案，昨天捣腾了半天 终于在配合接口的情况下解决了这个问题。

1、问题描叙

场景设定：在图片图片的管理后台，需要对每个投票都上传图片，且投票的选项是可以增加和删除的，这个时候使用vue的上传就没法再on-success 回调的时候知道是哪个选项的图片了。类似的场景还有很多，最近我在做的一个项目就是如此，一个广告位的默认展示图片，产品需要能够上传多组默认展示图片。那这个时候on-success的回调就不知道是哪个默认图片了，我使用的是iview-admin这个在vue2的基础上弄的后台模板，界面效果如下

2、代码解析

想了好多办法，都没法获取到类似js里面获取操作的那个this对象，vue的this对象是整个页面的，没办法。只好在接口上想办法，还好iview的上传组件支持传输附件意外的其他参数

iview-upload组件说明

下面进入主体了。。 首先在script标签data里面定义一个数组

uploadHtml: [{‘url’: ”, ‘tips’: ”, ‘upload’: ‘file’, ‘showPic’: false, ‘filePath’: ”}]

定义数组是为了方便后面对选项的增加或者移除。数组里面对象的每个key说明如下：

url ：点击默认图片跳转地址
tips ： 鼠标移动到图片上显示文字
upload ： 上传控件的name，统一默认为‘file’
showPic ：是否显示图片，默认为false ，当图片上传成功后则将上传的区域用上传成功后的图片替换
filePath : 上传成功后的附件路径
再在template标签里面循环upload组件，具体代码如下：

        </div>
    </Upload>
</Col>
<Col span="4" style="line-height: 100px;">
    <Button type="error" size="small"@click="minUploadHtml(i)" >
        <Icon type="minus"></Icon>
        删除
    </Button>
</Col>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

upload 里面定义action 为上传附件的地址，犹如我配置了上传地址的代理，显示的就是这样了，然后又配置了一个:data={‘data’:i} 将当前循环的i 提交至接口了。显示时对showPic 有个if判断，只有当showPic 为true时显示上传后的附件

然后再看下模板里面提到的几个方法 具体写在script 的 methods中

handleSuccess (res, file, fileList) {
var index = res.data.re_data;
this.uploadHtml[index].showPic = true;
this.uploadHtml[index].filePath = res.data.data.url;
},
handleFormatError (file) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 104: …图片文件。' }); }̲, handleMaxSize…Notice.warning({
title: ‘Exceeding file size limit’,
desc: ‘File ’ + file.name + ’ is too large, no more than 2M.’
});
},
handleProgress (event, file) {
this.$Notice.info({
title: ‘文件正在上传’,
desc: ‘文件 ’ + file.name + ’ 正在上传。’
});
},
handleBeforeUpload () {
},
// 增加默认选项
addUploadHtml () {
this.uploadHtml.push({‘url’: ‘’, ‘tips’: ‘’, ‘upload’: ‘file’, ‘showPic’: false, ‘filePath’: ‘’});
},
// 删除增加的元素
minUploadHtml (index) {
this.uploadHtml.splice(index, 1);
}
handleSuccess 里面res 即为服务端返回的response值，里面的re_data 则为请求是带的i 这样就可以找到是哪个选项的upload了，最终的效果如下图

3、总结

刚接触vue 没多久，只能用这种方法来解决这个问题了，后面想到更好的办法再补上。

4、后续更好办法

接触了一段时间的vue后，对之前的这个笨方法现在做了优化，不需要对接口做特殊的限制了， js function传值不仅可以用function(param1,param1,param1,param2) 这种方式，还可以使用 (value) => {} 这种方式来传递，之前困惑的问题是 iview的这个upload 上传组件中on-success 这个回调函数没有提供自定义的参数。 使用:on-success=”handleSuccess（i）” 又不能获取其自身的参数， 现在我们可以通过=> 这种赋值的方法来解决这个问题了， 只需要将之前的代码中:on-success=”handleSuccess” 修改成 :on-success=”(value)=> handleSuccess(i, value)” 这样就可以获取到外部的参数了。 完美解决了这个问题。

感谢作者提供的 :on-success=”(value)=> handleSuccess(i, value)” 来解决问题的，膜拜

–转载自: http://www.sixtymore.cn/archives/173