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的手動上傳

可以看到，元件中提供了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
                }
            })
        },
           

總結： 在遇到問題的時候，從多個方面想辦法解決，如果使用元件，建議列印元件方法 資料，有時候官方文檔寫的不全，是以可以檢視更多

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