一蝌衔、上傳文件實現(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ù)
《着獭（2）接收多文件一定要是數(shù)組形式的file[]，this.uploadForm.append('file[]', file)
4膳音、如何傳遞文件和其他參數(shù)
就像第一節(jié)那樣辜限，如果不使用action實現(xiàn)上傳，而使用before-upload屬性也能實現(xiàn)上傳的效果严蓖。
before-upload屬性薄嫡，這是一個function類型的屬性，默認(rèn)參數(shù)是當(dāng)前文件颗胡，只要能傳遞這個文件也能實現(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'
? ? ? ? ? }
? ? ? ? })
? ? },
