上傳文件時，有時候會碰到需要額外傳遞一些參數，顯示上傳的進度之類，這裡分享下之前做過的一些處理。

vue裡一般上傳文件會用到一些組件，本次使用的是el-upload，這裡隻是介紹一種思路, 其他的組件類似，有碰到類似問題的，歡迎探讨。 前端小白，涉及到的代碼可能會有點粗糙，歡迎來噴。

一開始在demo的時候，直接用的axios，按照官方的文檔，還是比較順利的。不過一般vue項目裡裡都會封裝一個http請求的攔截器，用來做一些請求的攔截和一些必要信息的傳遞。自然為了統一，上傳文件的内容也會使用到這個封裝的請求。

http攔截器部分代碼如下：（保存的文件位置和文件名是在utils/request.js裡

import axios from 'axios' import { Message } from 'element-ui' const baseURL = process.env.NODE_ENV === 'development' ? 'http://127.0.0.1:8080/api' : 'http://127.0.0.1/api' const instance = axios.create({ baseURL, timeout: 30000, withCredentials: true }) instance.interceptors.request.use( config => { config.headers['Authorization'] = 'Bearer ' localStorage.getItem('token') return config }, error => { Message({ showClose: true, message: error, type: 'error' }) Promise.reject(error) } )

axios有一個配置項是onUploadProgress, 主要就是獲取文件上傳進度的，上面的通用封裝沒有這個選項，但是我們可以在需要使用的地方，加入這個配置項，比如下面的這個upload方法

import request from '@/utils/request' function upload(data, config = {}) { return request({ url: '/upload', method: 'POST', data: data, ...config }) }

在實際的業務的vue代碼裡, template組件部分

<el-upload ref="newupload" class="upload-file" drag :before-upload="beforeUpload" multiple action="no" :http-request="doUpload" :auto-upload="false" accept=".mp4,.flv,.mov" :on-change="handleChange" :on-success="handlesuccess" > <i v-if="uploadFlag === false" class="el-icon-upload" /> <div v-if="uploadFlag === false" class="el-upload__text"> 将文件拖到此處，或<em>點擊上傳</em> </div> <el-progress v-if="uploadFlag === true" type="circle" :percentage="uploadPercent" style="margin-top: 30px;" /> <div slot="tip" class="el-upload__tip"> 請注意您隻能上傳.mp4 .flv .mov格式的視頻文件 </div> </el-upload>

注意，上述需要使用el-upload的http-request方法，如果不用的話，直接使用原生的action方式，就沒法攜帶額外的參數了

vue文件中的script代碼，就可以使用上面封裝的upload方法了，部分doUpload方法的代碼如下：

// 上傳文件是Form表單，但是el-upload默認的形式，沒法額外增加其他參數 // 這裡新定義一個FormData對象 let fd = new FormData() let self = this // video屬性綁定了二級制文件流内容 fd.append('video', val.file) // 這裡可以攜帶另外參數，用fd.append的形式即可 fd.append('Content-Type', 'video/mp4') // 調用前面封裝的upload方法 upload(fd, { onUploadProgress(progress) { // uploadPercent的值是el-progress組件綁定的值 self.uploadPercent = Math.round( (progress.loaded / progress.total) * 100 ) } }).then(res => { console.log(res) })

這裡upload的參數，傳入了一個{}類型，方法是onUploadProgress，axios其他的配置，也可以用類似的思路來增加。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!