上傳文件時，有時候會碰到需要額(e)外傳遞一些(xie)參數，顯示(shi)上傳的(de)進度(du)之(zhi)(zhi)類，這里分享(xiang)下之(zhi)(zhi)前(qian)做過的(de)一些(xie)處理。

vue里一般上傳文件會用到一些組(zu)件，本次使用的(de)是(shi)el-upload，這(zhe)里只是(shi)介(jie)紹一種(zhong)思路, 其他(ta)的(de)組(zu)件類似，有(you)(you)碰到類似問題的(de)，歡(huan)迎(ying)探討。 前端小白，涉(she)及(ji)到的(de)代(dai)碼可能會有(you)(you)點粗糙，歡(huan)迎(ying)來噴。

一開始(shi)在demo的(de)(de)時候，直(zhi)接用(yong)的(de)(de)axios，按照官方(fang)的(de)(de)文檔，還(huan)是(shi)比較(jiao)順利的(de)(de)。不(bu)過一般vue項(xiang)目里里都會封裝(zhuang)一個(ge)http請(qing)求(qiu)的(de)(de)攔(lan)截(jie)(jie)器，用(yong)來做一些(xie)請(qing)求(qiu)的(de)(de)攔(lan)截(jie)(jie)和一些(xie)必(bi)要信息(xi)的(de)(de)傳遞。自然為了統一，上傳文件的(de)(de)內容也(ye)會使用(yong)到(dao)這個(ge)封裝(zhuang)的(de)(de)請(qing)求(qiu)。

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

import axios from 'axios'import { Message } from 'element-ui'const baseURL =  process.env.NODE_ENV === 'development'    ? '//127.0.0.1:8080/api'    : '//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有一(yi)個(ge)配置項(xiang)是onUploadProgress, 主要就是獲(huo)取文(wen)件上傳(chuan)進度的(de)(de)，上面(mian)的(de)(de)通用(yong)封裝沒有這個(ge)選項(xiang)，但是我們可以在需要使用(yong)的(de)(de)地方，加(jia)入(ru)這個(ge)配置項(xiang)，比(bi)如(ru)下面(mian)的(de)(de)這個(ge)upload方法(fa)

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

在實(shi)際的業務(wu)的vue代碼里(li), template組件部分(fen)

<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>

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

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

// 上傳文件是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的參數(shu)，傳入了(le)一個(ge){}類型，方法(fa)是(shi)onUploadProgress，axios其他的配置，也(ye)可以用類似(si)的思路來增(zeng)加。