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

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

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值