主要解决两个问题:
1,上传一张图片,再上传一张,原来的被覆盖
2,怎么获得上传的图片的地址?
总代码如下:
<el-form-item label="*图片:">
<el-upload
ref="upload"
:file-list="fileListData"
:action="actionUrl"
list-type="picture-card"
:multiple="true"
name="files"
:on-remove="handleRemove"
accept="image/*"
:before-upload="beforeUpload"
:with-credentials="true"
:on-success="imgUploadSuccess"
:on-error="imgUploadFalse"
:limit=100
:headers="uploadHeader"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
</el-form-item>
data里面:
fileUploadJson:[],
methods里面:
methods: {
//批量驳回覆盖之前上传的文件
handleChange(file,fileList){
if(fileList.length>1){
fileList.splice(0,1);
}
},
beforeUpload(file){
this.fileUploadJson.push({url:file.url});
},
imgUploadSuccess(response, file, fileList){
for(var i =0 ;i<this.fileUploadJson.length;i++){
if(this.fileUploadJson[i].name === file.name){
**this.fileUploadJson[i].url = response.data;**//this.fileUploadJson[i].url就是图片的地址
}
}
this.listQuery.imgUrl=response.data;//将图片的地址赋值给自己想要赋值的属性: this.listQuery.imgUrl
},
}
关于解答第一个问题:
注意:因为上面的代码的样式是图片+,也有删除,所以没有覆盖那个问题了,但是如果想要覆盖,就是下面两个步骤
主要有两点:
1,:el-upload里面;
on-change=" handleChange"
2,methods里面:
//批量驳回覆盖之前上传的文件
handleChange(file,fileList){
if(fileList.length>1){
fileList.splice(0,1);
}
},
关于解答第二个问题:
1,el-upload里面:
:before-upload="beforeUpload"
:on-success="imgUploadSuccess"
2,data里面:
fileUploadJson:[],
3,methods里面:
beforeUpload(file){
this.fileUploadJson.push({url:file.url});
},
imgUploadSuccess(response, file, fileList){
for(var i =0 ;i<this.fileUploadJson.length;i++){
if(this.fileUploadJson[i].name === file.name){
this.fileUploadJson[i].url = response.data;
}
}
this.listQuery.imgUrl=response.data;
},