1.标签代码如下:
<!--fileList存放图片集合-->
<!--action图片上传请求方法-->
<!--onRemove删除预览图片-->
<!--onSuccess图片上传成功后的回调函数-->
<u-upload file-list="fileList" :action="action" @on-remove="onRemove" @on-Success="onSuccess"></u-upload>
2.属性值的定义和JS相关方法代码如下:
import config from '@/utils/config.js'
data() {
return {
//图片显示前缀
imgConfig: config.imageBaseUrl,
form: {
pictureUrl: undefined,
},
//图片上传请求的后台方法 config.apiHost访问方法前缀
action: config.apiHost + "/forum/forum/multiPicturesUpload",
//存放图片集合
fileList: []
}
},
methods: {
//图片成功上传后的回调 data为服务器返回的数据,包括图片的存放地址和名称
onSuccess(data, index, lists){
//页面上定义的临时存放图片的对象,提示也保存后台返回的图片名称
let currentFile = {name: '', url: ''};
currentFile.name = JSON.parse(data).name;
currentFile.url = JSON.parse(data).imgUrl;
//成功上传一个图片就往fileList里面添加一个图片对象
this.fileList.push(currentFile);
//this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合
this.form.pictureUrl = JSON.stringify(this.fileList)
//console.log("打印图片List:onSuccess", this.fileList);
},
//删除一张图片的回调,lists这是成功删除一个图片后,还剩余的图片集合
onRemove(data, lists){
//lists.length > 0说明删除之前已经上传了多余两张的图片
if(lists.length > 0 ){
var currentfileList = [];
//遍历this.fileList 与剩余的lists进行匹配,来组成一个新的格式合适的剩余图片集合
this.fileList.forEach((item, index)=>{
lists.forEach((item1, index1)=>{
if(item.name == JSON.parse(item1.response).name){
currentfileList.push(item);
}
});
})
//删除后对图片集合及时冬天更新,即对this.fileList重新赋值
this.fileList = currentfileList;
}else{//说明删除之前只有一张图片,删除成功后把this.fileList清空即可
this.fileList = [];
}
this.form.pictureUrl = JSON.stringify(this.fileList)
//console.log("打印图片List:onRemove", this.fileList);
}
}
3.页面和数据库效果如下:
4.后台图片上传代码就不再展示了,提示一点:调取图片上传后台方法我返回的是图片名称和图片存储地址。