Vue上傳文件：ElementUI中的upload實現

一、上傳文件實現

　　兩種實現方式：

1、直接action

<el-upload class="upload-file" drag :action="doUpload" :data="pppss">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>

　　:action，必選參數，上傳的地址，String類型。data()需要使用代理轉發，要不然會有跨域的問題

　　:data，上傳時附帶的額外參數，object類型。用於傳遞其他的需要攜帶的參數，比如下面的srid

data(){ return { ,doUpload:'/api/up/file' ,pppss:{ srid:'' } } },

2、利用before-upload屬性

　　此種方式有個弊端，就是action是必選的參數，那么action如果和post的url一致，總會請求2次，所以一般把action隨便寫一個url，雖然不影響最終效果，但是這樣會在控制台總有404錯誤報出

<el-upload class="upload-file" drag :action="doUpload" :before-upload="beforeUpload"
  ref="newupload" multiple :auto-upload="false">
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>

beforeUpload(file){ let fd = new FormData(); fd.append('file',file);//傳文件
    fd.append('srid',this.aqForm.srid);//傳其他參數
    axios.post('/api/up/file',fd).then(function(res){ alert('成功'); }) }, newSubmitForm(){//確定上傳
    this.$refs.newupload.submit(); }

二、常用方法介紹

1、動態改變action地址

　　action是一個必填參數，且其類型為string，我們把action寫成:action，然后后面跟着一個方法名，調用方法，返回你想要的地址，實現動態的去修改上傳地址

//html 代碼
<el-upload  :action="UploadUrl()"  :on-success="UploadSuccess" :file-list="fileList">
    <el-button size="small" type="primary" >點擊上傳</el-button>
</el-upload>

// js 代碼在 methods中寫入需要調用的方法
methods:{ UploadUrl:function(){ return "返回需要上傳的地址"; } } 

2、在文件上傳前做類型大小等限制

（1）一種方式是，加accpet屬性

<el-upload class="upload-demo" :multiple="true" :action="action" accept="image/jpeg,image/gif,image/png,image/bmp" 
:file-list="fileList" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess">

（2）另一種方式是在上傳前的觸發函數里面去判斷

beforeAvatarUpload(file) { const isJPG = file.type === 'image/jpeg'; const isGIF = file.type === 'image/gif'; const isPNG = file.type === 'image/png'; const isBMP = file.type === 'image/bmp'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG && !isGIF && !isPNG && !isBMP) { this.common.errorTip('上傳圖片必須是JPG/GIF/PNG/BMP 格式!'); } if (!isLt2M) { this.common.errorTip('上傳圖片大小不能超過 2MB!'); } return (isJPG || isBMP || isGIF || isPNG) && isLt2M; },

3、同時傳遞form表單及有多個upload文件該如何傳遞？

newSubmitForm () { this.$refs['newform'].validate((valid) => { if (valid) { //表單的數據
      this.uploadForm.append('expName', this.newform.expName) this.uploadForm.append('expSn', this.newform.expSn) this.uploadForm.append('groupId', this.newgroupId) this.uploadForm.append('subGroupId', this.newsubgroupId) this.uploadForm.append('expvmDifficulty', this.newform.expvmDifficulty) newExp(this.uploadForm).then(res => { if (res.code === 400) { this.$message.error(res.error) } else if (res.code === 200) { this.$message.success('上傳成功！') } }) this.$refs.uploadhtml.submit()   // 提交時分別觸發各上傳組件的before-upload函數
      this.$refs.uploadfile.submit() this.$refs.uploadvideo.submit() } else { console.log('error submit!!') return false } }) }, newHtml (file) { // before-upload
  this.uploadForm.append('html', file) return false }, newFiles (file) { this.uploadForm.append('file[]', file) return false }, newVideo (file) { this.uploadForm.append('video', file) return false }

export function newExp (data) { return axios({ method: 'post',  // 方式一定是post
    url: '你的后台接收函數路徑', timeout: 20000, data: data // 參數需要是單一的formData形式
 }) }

　　注意：（1）對於多個上傳組件來說，需要分別觸發，去給FormData append數據

　　（2）接收多文件一定要是數組形式的file[]，this.uploadForm.append('file[]', file)

4、如何傳遞文件和其他參數

　　就像第一節那樣，如果不使用action實現上傳，而使用before-upload屬性也能實現上傳的效果。

　　before-upload屬性，這是一個function類型的屬性，默認參數是當前文件，只要能傳遞這個文件也能實現效果

　　要傳遞這個方法就需要new一個formdata對象，然后對這個對象追加key和value，類似於postman測試時那樣。

　　另外注意：傳遞formdata和data不能一起傳遞，要傳遞formdata就不能有data，所以對於其他參數的傳遞，也要改為

beforeUpload (file,id) { let fd = new FormData() fd.append('file', file) fd.append('id',id)//其他參數
 axios.post(url, fd, { }) },

　　而不能使用這種又有FormData，又有data的模式

beforeUpload (file,id) { let fd = new FormData() fd.append('key', file, fileName) axios.post(url, fd,{ data：{ id:id }, headers: { 'Content-Type': 'multipart/form-data' } }) },