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){
                    //确定上传上传组件再走一次生命周期显示，因为修改action
                        this.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
                }
            })
        },

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

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