First, upload files to achieve
Two implementations:
1. Direct action
<el-upload
class="upload-file"
drag
:action="doUpload"
:data="pppss">
<i class="el-icon-upload"></i>
<div class = " el-upload__text " >Drag files here, or <em>click to upload</em></div>
</el-upload>
:action, required parameter, upload address, String type. data() needs to use proxy forwarding, otherwise there will be cross-domain problems
:data, additional parameters attached to upload, object type. Used to pass other parameters that need to be carried, such as the following srid
data(){
return {
,doUpload:'/api/up/file'
,pppss:{
srid:''
}
}
},
2. Use the before-upload property
This method has a drawback, that is, the action is a required parameter. If the action is the same as the post url, it will always be requested twice, so generally write a url for the action, although it does not affect the final effect, but this will control the There are always 404 errors reported
<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 " >Drag files here, or <em>click to upload</em></div>
</el-upload>
beforeUpload(file){
let fd = new FormData();
fd.append( ' file ' ,file); // pass file
fd.append( ' srid ' , this .aqForm.srid); // pass other parameters
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'
}
})
},