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

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>
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( p a r a m 1 , 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

Logo

前往低代码交流专区

更多推荐