iviewui Upload上传爬坑，手动上传，二次上传

##Upload 实现二次上传

因为不熟悉iview 组件，在做上传的时候，查看公司之前项目都是直接上传，但是到我手里的项目是需要先走一下
接口进行上传文件验证 /(ㄒoㄒ)/~~ ，然后增加其他参数再上传

直接上例子

描述：需要先走验证，然后手动上传

额外参数

额外参数增加好说，在项目文档中有说明 增加data变量，将增加的参数都放到 data 中 额外参数就解决了

 <Upload :action="actionUrl"ref="upLoadRef":show-upload-list="false" :on-success="uploadFile" :before-upload="beforUp":data="upOtherData":headers="uploadHeader"><Button class="otherBtn"><i style="padding-right:4px" class="icon-scdr"></i>上传         </Button></Upload>

参数说明：、action：上传的请求接口  我使用的变量 也就是校验的请求，之后确定上传修改这个变量show-upload-list: 是否显示上传之后的列表 on-success：上传成功之后 （response, file, fileList）参数，我这里拿到返回之后文件名称before-upload：上传之前(res) 可以拿到要上传的文件 res后面有用data： 确定上传增加额外参数headers：可以给请求头增加参数 后端要求token，所以里面放了token

以上就是我的设置，一开始方向错误，我一直在纠结参数格式，用组件上传会默认将参数格式为这样，

看到参数了吗，默认有一个file 为key ，关键是后面的类型，我在上传前拿到的参数格式File格式，直接在后面拿来请求，不行，我一直在这个方向努力了很久，最后没有成功，希望有经验的同学给指点一下，之后不行，晚上睡不好，各种搜资料，无意中看到这个，upload的手动上传

 console,log(this.$refs.upLoadRef)

可以看到，组件中提供了post方法，可以实现手动上传功能

    所以我可以第一次走校验的接口，将上传文件给后端，第二次点击确定的时候增加参数data 然后修改action 内容，使用 上传前 before-upload 方法拿到的 res 结合 post 方法，进行确认上传于是进入又进入另一个坑，会告诉你不能修改action的值，虽然控制台报错，但是可以上传成功；为了修改这个bug我用了比较蠢的方法，直接上代码

点击确认，增加参数，修改action

 /*** @date         2020-12-08* @description  确定上传*/upFile(){this.$refs['uploadSecurityForm'].validate((valid)=>{if(valid){//确定上传上传组件再走一次生命周期显示，因为修改actionthis.upLoadShow = false; //用v-if来控制上传组件显示this.actionUrl = '/dsmp/DataSecurityKnowledge/upload';this.upLoadShow = true;//等待上传组件加载完成，才能获取到upLoadRef，然后执行上传方法this.$nextTick(()=>{//上传需要增加文件类型参数this.upOtherData.fileClass = this.addForm.fileType;//触发手动上传功能this.$refs.upLoadRef.post(this.fileContent);//关闭上传弹窗this.uploadModal = false;//刷新列表this.getData();})}else{return false}})},

总结： 在遇到问题的时候，从多个方面想办法解决，如果使用组件，建议打印组件方法数据，有时候官方文档写的不全，所以可以查看更多

完结撒花 ★,°:.☆(￣▽￣)/$:.°★ 。

iviewui Upload上传爬坑，手动上传，二次上传相关推荐

微信公众号JS-SDK多图上传爬坑指南
一.wx.chooseImage爬坑出现的问题: 安卓将chooseImage 方法返回的 localId 放在img标签的src属性下能够显示图片 IOS将chooseImage 方法返回的 lo ...
3dmax 焊接顶点死活焊接不上的爬坑日记。
焊接定点在编辑网格或者编辑多边形的顶点次级中经常使用,笔者今天死活焊接不上去,找了半天终于找到终极原因.写下怕坑日记: 通常遇见这个问题:主要原因是因为你的模型是后来附加到一起的. 例如: 这两个模型 ...
Android环信爬坑指北（二）头像昵称好友备注显示
在上一篇文章中提到了要在初始化的时候,设置用户信息提供者类--EaseUserProfileProvider,用以获取用户信息.下面我们来看一下 EaseUserProfileProvider 是 ...
微信小程序爬坑之旅（二）腾讯git代码仓库拉取问题和页面固定
本来想写一下上一章提到的小程序 map 组件,但是我万万没想到啊,中间发现的问题我认为我需要在这里说一下腾讯版本管理git仓库腾讯的小程序编辑器是提供了一套代码管理的.在编辑器的右上角版本管理中, ...
抖音怎么上传无损画质_抖音上传视频为什么会模糊？如何才能上传高清无损视频？...
抖音上传视频为什么会模糊?如何才能上传高清无损视频? 文章首发"公众号"[四爷课堂],专注分享短视频运营干货,关注可领取100G抖音运营资料,仅限50个名额. 四哥初入抖音的时候, ...
蚂蚁金服零号云客服遇到爬坑
蚂蚁金服零号云客服遇到爬坑一.准备二.代码 2.1.背景 2.2.依赖 2.3.代码三.配置回调地址四.测试最近接一个sdk,也就是蚂蚁金服零号云客服的一个自定义卡片的功能一.准备官方文 ...
Vue 爬坑之路（一）—— 使用 vue-cli 搭建项目
Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https: ...
iview upload爬坑之手动上传以及动态修改附带参数附后台接受测试代码
今天用iview 的upload 上传文件,除文件外还想传其他参数,所以需要手动控制upload 上传,看了官网手动上传例子,发现起并没有真正上传,只是延迟时间给看了看效果,官网例子如下不想吐槽这官 ...
WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...

iviewui Upload上传爬坑，手动上传，二次上传

额外参数

iviewui Upload上传爬坑，手动上传，二次上传相关推荐

最新文章

热门文章