一、上传文件实现
两种实现方式：
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‘ ?????????} ???????}) ????},Vue上传文件：ElementUI中的upload实现
原文地址：https://www.cnblogs.com/goloving/p/8967865.html