一、上傳文件實現(xiàn)
兩種實現(xiàn)方式：
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，必選參數(shù)，上傳的地址，String類型。data()需要使用代理轉(zhuǎn)發(fā)，要不然會有跨域的問題
:data，上傳時附帶的額外參數(shù)，object類型。用于傳遞其他的需要攜帶的參數(shù)，比如下面的srid
data(){
? ? return {
? ? ? ? ,doUpload:'/api/up/file'
? ? ? ? ,pppss:{
? ? ? ? ? ? srid:''
? ? ? ? }
? ? }
},
2、利用before-upload屬性
此種方式有個弊端，就是action是必選的參數(shù)，那么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);//傳其他參數(shù)
? ? axios.post('/api/up/file',fd).then(function(res){
? ? ? ? ? ? alert('成功');
? ? })
},
newSubmitForm(){//確定上傳
? ? this.$refs.newupload.submit();
}
二、常用方法介紹
1、動態(tài)改變action地址
action是一個必填參數(shù)，且其類型為string，我們把action寫成:action，然后后面跟著一個方法名，調(diào)用方法，返回你想要的地址，實現(xiàn)動態(tài)的去修改上傳地址
//html 代碼
<el-upload? :action="UploadUrl()"? :on-success="UploadSuccess" :file-list="fileList">
? ? <el-button size="small" type="primary" >點擊上傳</el-button>
</el-upload>
// js 代碼在 methods中寫入需要調(diào)用的方法
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）另一種方式是在上傳前的觸發(fā)函數(shù)里面去判斷
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) {
? ? ? //表單的數(shù)據(jù)
? ? ? 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()? // 提交時分別觸發(fā)各上傳組件的before-upload函數(shù)
? ? ? 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: '你的后臺接收函數(shù)路徑',
? ? timeout: 20000,
? ? data: data? ? ? ? // 參數(shù)需要是單一的formData形式
? })
}
注意：（1）對于多個上傳組件來說，需要分別觸發(fā)，去給FormData append數(shù)據(jù)
?。?）接收多文件一定要是數(shù)組形式的file[]，this.uploadForm.append('file[]', file)
4、如何傳遞文件和其他參數(shù)
就像第一節(jié)那樣，如果不使用action實現(xiàn)上傳，而使用before-upload屬性也能實現(xiàn)上傳的效果。
before-upload屬性，這是一個function類型的屬性，默認參數(shù)是當前文件，只要能傳遞這個文件也能實現(xiàn)效果
要傳遞這個方法就需要new一個formdata對象，然后對這個對象追加key和value，類似于postman測試時那樣。
另外注意：傳遞formdata和data不能一起傳遞，要傳遞formdata就不能有data，所以對于其他參數(shù)的傳遞，也要改為
beforeUpload (file,id) {
? ? let fd = new FormData()
? ? fd.append('file', file)
? ? fd.append('id',id)//其他參數(shù)
? ? 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'
? ? ? ? ? }
? ? ? ? })
? ? },
