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