【vue開發問題-解決方法】（九）使用element upload自定義接口上傳文件，input多文件上傳

昨天做了一個上傳用戶頭像的功能，已經附件管理功能。頭像上傳使用了elemenUI的上傳控件el-upload，附件管理因為對樣式沒有要求使用了原生的附件上傳。

項目背景：使用axios的post調用接口

頭像上傳

使用el-upload標簽，設置show-file-list為false不顯示文件列表，注意一定要設置action（雖然這里用不到），http-request覆蓋默認的上傳行為，可以自定義上傳的實現uploadSectionFile，這樣在點擊選擇file文件后就直接執行uploadSectionFile中的操作。

<el-upload class="avatar-uploader" :http-request="uploadSectionFile" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/">
　　<img v-if="imgUrl" :src="imgUrl" class="avatar">
   <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

　　　　　　function uploadSectionFile(param) {
                //創建臨時的路徑來展示圖片
                var windowURL = window.URL || window.webkitURL;
                this.imgUrl = windowURL.createObjectURL(param.file);
                let name = param.file.name;
                let data = {
                    file: file,
                    fileType: name.split(".")[name.split('.').length - 1],
                    fileId: this.$store.getters.uid,
                    fileName: name,
                }
                let rs = ah.fileUpLoad(this, data);//封裝的axio post請求
                console.log(rs);
            },

最后注意axios post文件上傳方法的調用，data參數需要轉化為formData（）傳遞。

　　　　　　　　let param = new FormData(); //創建form對象

            param.append('file', data.file);//通過append向form對象添加數據

            param.append('fileType', data.fileType);//通過append向form對象添加數據

            param.append('fileId', data.fileId);//通過append向form對象添加數據

            param.append('fileName', data.fileName);//添加form表單中其他數據

            param.append('TOKEN', store.getters.accessToken);//添加登錄驗證  

 　　　　　　axios.post(_url, params, config) .then(res => { resolve(res.data); }) .catch(err => { reject(err); }) 

 

請求頭部：

請求參數格式：

使用input標簽實現多文件上傳

 實現點擊按鈕選擇文件上傳，實現思路：隱藏input標簽（不顯示文件），btn的click事件觸發input標簽的onchange事件，然后再change事件中獲取文件信息上傳。

<!-- 多文件上傳 -->
        <input type="file" @change="uploads($event)" id="files" style="display: none;" multiple/>
<!--上傳按鈕,在elementUI表格中的button，scope.row為行數據-->
<el-button size="mini" @click="uploadFile(scope.row)">上傳</el-button>

方法：

 //上傳文件
            function uploadFile(row) {
                this.row = row;
                $("#files").val("");//觸發input file的點擊事件
                $("#files").click();//觸發input file的點擊事件
            },
            function uploads(e) {
                for (let file of e.target.files) {//多文件上傳
                    let data = {
                        file: file,
                        bimId: this.finfo.bimid,
                        actId: this.finfo.actid,
                        bicpId: this.row.ITEMID,
                    };
                    let rs = ah.uploadAffix(this, data);
                    if (!rs) break;
                }
            },

axios post請求參數還是要轉化為formData（）

            let param = new FormData();
            param.append('file[]', data.file); // 'file[]' 代表數組 其中`file`是可變的 
            param.append('bimId', data.bimId);
            param.append('actId', data.actId);
            param.append('bicpId', data.bicpId); param.append('TOKEN', store.getters.accessToken);//必須

 　　　　　　axios.post(_url, params, config)
                .then(res => {
                    resolve(res.data);
                })
                .catch(err => {
                    reject(err);
                })        

 以上代碼不是全部，只是提供關鍵性代碼，主要講解思路實現方法。歡迎提問。。。