Vue element自定义多图上传 一个key多个文件
业务功能阐述
<el-form-item label="商品图" prop="name">
<el-upload
action="123"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-change="imgPreview"
:on-remove="handleRemove"
:auto-upload="false">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="silder_imageVisible">
<img width="100%" :src="form.silder_image" alt="">
</el-dialog>
</el-form-item>
action这里随便填写用:auto-upload="false"将其警用掉,使用自定义方法:on-change=“imgPreview”
对应html代码
<el-form-item label="商品图" prop="name">
<el-upload
action="123"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-change="imgPreview"
:on-remove="handleRemove"
:auto-upload="false">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="silder_imageVisible">
<img width="100%" :src="form.silder_image" alt="">
</el-dialog>
</el-form-item>
对应javascript代码
//移除图片
//this.form.silderimgList上传后的图片文件数组
handleRemove(file, fileList) {
console.log('移除图片')
this.form.silderimgList=[]
for(let i=0;i<fileList.length;i++){
let str=""
str = fileList[i].url
this.form.silderimgList.push(str)
}
console.log(this.form.silderimgList);
console.log('移除图片')
},
//点击放大图片
handlePictureCardPreview(file) {
this.form.silder_image = file.url;
//console.log(file.url)
this.silder_imageVisible = true;
},
//图片上传事件
imgPreview (file, fileList) {
let fileName = file.name;
let regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/;
if (regex.test(fileName.toLowerCase())) {
this.form.silder_image = file.url;
} else {
this.$message.error('请选择图片文件');
}
console.log('图片上传事件')
this.form.silderimgList=[]
for(let i=0;i<fileList.length;i++){
let obj={}
obj = fileList[i].raw
this.form.silderimgList.push(obj)
}
this.form.name = fileList[0].raw
console.log(file,fileList);
console.log(this.form.silderimgList);
console.log('图片上传事件')
},
getimg(){
let that = this
//打印已包装好的文件格式数组
console.log(that.form.silderimgList)
let formData = new FormData();
//that.form.silderimgList值本地预览的图片数组
formData.append('files', that.form.silderimgList);
//商品名
formData.append('goodsName', that.form.silderimgList);
//打印文件格式数组
console.log(formData.get('files'))
//上传服务器的api
that.$axios({
method: "post",//指定请求方式
url: "请求地址你们自己写",//请求接口
headers: {
'Content-Type': 'application/x-www-form-urlencoded;'
},
data:formData
}).then(function(res){
javascriptconsole.log('成功')
if(res.data.code === 0){
that.$message({
message: '成功',
type: 'success',
duration: 1500
})
}else{
that.$message.error(res.data.message);
}
})
}
-
当执行上面方法你会发现(包装好的文件数组和通过append放入formData()对象中的不一样)
- 例如打印包装好的没有问题
- 打印通过append放入formData()对象中
- 向服务器发送的请求
-
正确示例
getimg(){
let that = this
let formData = new FormData();
//that.form.silderimgList值本地预览的图片数组
for(let i=0;i<this.form.silderimgList.length;i++){
formData.append('files', that.form.silderimgList[i]);
}
//商品名
formData.append('goodsName', that.form.silderimgList);
//打印文件格式数组
console.log(formData.get('files'))
//上传服务器的api
that.$axios({
method: "post",//指定请求方式
url: "http://byd.isoft.mobi/api/login_filesGo",//请求接口
headers: {
'Content-Type': 'application/x-www-form-urlencoded;'
},
data:formData
}).then(function(res){
console.log('成功')
if(res.data.code === 0){
that.$message({
message: '成功',
type: 'success',
duration: 1500
})
}else{
that.$message.error(res.data.message);
}
})
}
- 例如打印包装好的没有问题
- 向服务器发送的