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.$wupload.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 = pe === 'image/jpeg';
const isGIF = pe === 'image/gif';
const isPNG = pe === 'image/png';
const isBMP = pe === 'image/bmp';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG && !isGIF && !isPNG && !isBMP) {
}
if (!isLt2M) {
}
return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
},
3、同时传递form表单及有多个upload⽂件该如何传递？
newSubmitForm () {
this.$refs['newform'].validate((valid) => {
if (valid) {
//表单的数据
this.uploadForm.append('expName', pName)
this.uploadForm.append('expSn', pSn)
this.uploadForm.append('groupId', wgroupId)
this.uploadForm.append('subGroupId', wsubgroupId)
this.uploadForm.append('expvmDifficulty', pvmDifficulty)
newExp(this.uploadForm).then(res => {
if (de === 400) {
this.$()
} else if (de === 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
},vue element admin
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'
}
})
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。