小程序前端Vue里使用u-upload进行多图片上传

1.标签代码如下：

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.后台图片上传代码就不再展示了，提示一点：调取图片上传后台方法我返回的是图片名称和图片存储地址。