前言
工作中碰到需要多图上传,在使用element-ui解决过程中碰到一些问题,在这里分享给大家。
环境:
Springboot+Vue+Element-ui
正文
这次上传使用的是Elemet-ui的uoload上传组件,组件预留的钩子回调还是比较充足的。
实现多图上传主要用到以下两个属性:
1.多文件自动上传
html
<el-upload
ref="upload"
:http-request="upload"
:show-file-list="true"
action="http"
:before-upload="beforeAvatarUpload"
:auto-upload="true"
:on-success="handleAvatarSuccess"
class="upload-demo"
drag
name="file"
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jar文件,且不超过2MB</div>
</el-upload>
js
<!-- JS代码 -->
new Vue({
el: '#app',
data: {
multiple:true,
formDate:""
},
mounted: function () {
},
methods: {
// 自定义文件上传的方式
upload(file) {
const formData = new FormData()
formData.append('files[]', file.file)
// 多文件上传带其他参数,传递formdata和data不能一起传递,要传递formdata 就不能有data
formData.append('id', 1)
formData.append('Content-Type', 'multipart/form-data')
axios.post("your URL",formData).then( res => {
console.log(res)
this.handleAvatarSuccess(res.data)
}).catch( res => {
console.log(res)
})
},
// 上传前的大小验证及格式验证
beforeAvatarUpload(file) {
const isJPG = file.name.slice(-4) === '.jar'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message({
message: '上传文件只能是 JAR 格式',
type: 'error'
})
}
if (!isLt2M) {
this.$message({
message: '上传图片大小不能超过 2MB',
type: 'error'
})
}
return isJPG && isLt2M
},
handleAvatarSuccess(res, file) {
console.log(res)
console.log(file)
}
}
}
})
Elemet-ui是自带多图上传的,但是细心的朋友可能发现默认多图的实现可能和我们预期有些出入,有截图可以看出,实质是进行多次请求。
在上传事件触发后,多图上传的默认实现调用了三次POST请求
2 多图一次上传。
思路就是使用H5的FormData对象模拟表单上传:
修改:auto-upload="false"属性为false,阻止组件的自动上传
new FormData()创建创建FormData对象
向FormData对象设置文件,并把FormData作为参数发送到后台(后台是java实现)
<el-upload
ref="upload"
:http-request="upload"
:show-file-list="true"
:before-upload="beforeAvatarUpload"
:auto-upload="false"
:on-success="handleAvatarSuccess"
class="upload-demo"
action="http"
drag
name="file"
multiple>
<i class="el-icon-upload"/>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div slot="tip" class="el-upload__tip">只能上传jar文件,且不超过2MB</div>
</el-upload>
<el-button @click="subPicForm">提交上传</el-button>
<!-- JS代码 -->
new Vue({
el: '#app',
data: {
formDate:""
},
mounted: function () {
},
methods: {
upload(file){
this.formDate.append('file', file.file);
},
subPicForm(){
this.formDate = new FormData()
this.$refs.upload.submit();
this.formDate.append('id', "code");
this.formDate.append('Content-Type', 'multipart/form-data')
axios.post("your URL", this.formDate).then( res => {
console.log(res)
}).catch( res => {
console.log(res)
})
}
}
})