uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）

耶啵奶膘

已于 2023-03-22 10:19:59 修改

阅读量2.2w

点赞数 21

分类专栏： uni、vue 文章标签： uni-app 前端

于 2022-10-08 13:32:20 首次发布

本文链接：https://blog.csdn.net/xulihua_75/article/details/127206064

版权

uni、vue 专栏收录该内容

150 篇文章

订阅专栏

一、简介

uView组件的上传功能，单图上传、多图上传等。
官方文档地址：
https://www.uviewui.com/components/upload.html

二、步骤

（一）单图上传

1.效果演示：

只能上传一张，选完之后，上传的按钮消失，当然，如果图片不合适，删掉再换一张，但就是只能上传一张。
在这里插入图片描述

2.代码：

<template>
	<view class="content">
		<!-- 上传图片 -->
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="false" :maxCount="1" width="112rpx" height="109rpx" :deletable="true" :previewImage="true">
		    <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
			<image src="/static/function/uploadImg.png" mode="widthFix" style="width: 112rpx;height: 110rpx;"></image>
		</u-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传图片
				fileList1: [],
			}
		},
		onLoad() {

		},
		methods: {
		    //删除图片
			deletePic(e) {
				console.log(e);
				this[`fileList${e.name}`].splice(e.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
						url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data=JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							resolve(data.data.url)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
</style>

（二）多图上传

1.效果演示：

可一次性选多张，我这里限制为两张，上传满两张则不会显示上传的logo。点击图片可预览。
在这里插入图片描述

2.代码：

<template>
	<view class="content">
		<!-- 上传图片 -->
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :multiple="true" :maxCount="2" width="112rpx" height="109rpx" :deletable="true" :previewImage="true">
		    <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
			<image src="/static/function/uploadImg.png" mode="widthFix" style="width: 112rpx;height: 110rpx;"></image>
		</u-upload>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 上传图片
				fileList1: [],
			}
		},
		onLoad() {

		},
		methods: {
		    //删除图片
			deletePic(e) {
				console.log(e);
				this[`fileList${e.name}`].splice(e.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
						url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
</style>

三、其余补充

在这里插入图片描述
如果一个页面上有多处上传，操作也不是很复杂，大家都是共用同一个方法。

整体搬过来用即可。

请求接口的地方需要用join处理一下

getData() {
	let images=[]
	this.fileList1.forEach((item)=>{
		images.push(item.url)
	})
	this.$common.request('post', '/Coupon/addCoupon', {
		image:images.join(','),
	}).then(res => {
		if (res.code == 1) {
			this.$common.success(res.msg)
			setTimeout(()=>{
				this.$common.back()
			},1200)
		}
	})
},

新上传代码：(多图处理)

<view class="imgBox">
	<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :multiple="true" :maxCount="9">
		<image :src="$common.image('/static/talentZone/addImg.png')" mode="aspectFill"  class="fileImg"></image>
	</u-upload>
</view>

data() {
	return {
		// 图片列表
		fileList: []
	}
},
methods: {
	// 图片上传
	//删除图片
	deletePic(e) {
		console.log(e);
		this.fileList.splice(e.index, 1)
	},
	// 新增图片
	async afterRead(event) {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = this.fileList.length
		lists.map((item) => {
			this.fileList.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			const result = await this.uploadFilePromise(lists[i].url)
			console.log(result);
			if(result.success){
				let item = this.fileList[fileListLen]
				this.fileList.splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}else{
				this.fileList.splice(fileListLen, 1)
			}
			
		}
	},
	//上传图片
	uploadFilePromise(url) {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址,换成自己上传图片的接口
				filePath: url,
				name: 'file',
				success: (uploadRes) => {
					setTimeout(()=>{
						let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式
						if(res.code == 0){
							this.$common.msg(res.msg)
							resolve({success:false,url:''})
							return;
						}
						resolve({success:true,url:res.data.url})
					},2000)
					
				}
			});
		})
	},
	//点击确认还需要些许修改
	fabu() {
		let images = []
		this.fileList.forEach((item) => {
			images.push(item.url.url)
		})
		// 其他接口
		request('post', '其他接口地址', {
			title: this.textValue,
			info: this.textValue,
			images: images.join(',')//重点是这里，需要看后台接收的类型进行更改
		}).then(res => {
			if (res.code == 1) {
				console.log(res);
			}
		})
	},
}

图片上传

// 图片上传
//删除图片
deletePic(event) {
	this[`fileList${event.name}`].splice(event.index, 1)
},
// 新增图片
async afterRead(event) {
	// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file)
	let fileListLen = this[`fileList${event.name}`].length
	lists.map((item) => {
		this[`fileList${event.name}`].push({
			...item,
			status: 'uploading',
			message: '上传中'
		})
	})
	for (let i = 0; i < lists.length; i++) {
		const result = await this.uploadFilePromise(lists[i].url)
		console.log("结果", result);
		if (result.success) {
			let item = this.fileList[fileListLen]
			this.fileList.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		} else {
			this.fileList.splice(fileListLen, 1)
		}
	}
},
uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: config[config.env].apiUrl + '/api/common/upload', // 仅为示例，非真实的接口地址
			filePath: url,
			name: 'file',
			formData: {
				user: 'test'
			},
			success: (uploadRes) => {
				setTimeout(() => {
					let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式
					if (res.code == 0) {
						this.$common.msg(res.msg)
						resolve({
							success: false,
							url: ''
						})
						return;
					}
					console.log("图片", res);
					resolve({
						success: true,
						url: res.data.url
					})
				}, 1000)
			}
		});
	})
},

单图传值

data(){
	return{
		payment_credentials:''//支付凭证（线下必填）
	}
},
methods: {
aaa(){
	if (this.fileList.length > 0) {
		this.payment_credentials = this.fileList[0].url.url
	}}
	
}

图片回显

当内容进行修改时，需要先将上次上传过的图片进行显示（后台会返回图片数组），之后或许删除上次中的某种图片，也有可能会新上传一些图片。最后提交给后台的数据的图片数组是不带域名的。
整体步骤如下：

data() {
	return {
		// 图片列表
		fileList: [],
		//修改功能 需要提交的图片数组
		subImg:[]
	}
},

1.修改，根据id 进行查询此条数据的信息，后台返回该条数据信息，这里只说图片的事。首先对`images`进行处理，字符串转化为数组，之后对分割后的数组`subImg`进行遍历循环，把图片路径（拼接好域名之后）push到`fileList`数组里面，这时候页面的图片就能显示了。

this.subImg = res.data.images.split(',') //字符串转化为数组
this.subImg.forEach(item=>{
	console.log(item);
	this.fileList.push({
		url:  this.$common.image(item)//拼接好域名之后push进去
	})
})
console.log(this.fileList);

在这里插入图片描述

2.由于修改之后提交给后台的图片数组是不带域名的，所以自定义了一个`subImg`数组，刚上来的时候就已经赋进去了最初始的两张图，如果删除，就根据删除的下标删除掉此数组里面的图片，每次上传新图片的时候，就把新上传后返回的图片路径push进去，这样不管是删除还是新增都能保证sunImg数组里面的图片都是最新的，且不带域名

核心代码：

this.subImg.splice(e.index, 1)

this.subImg.push(res.data.url)

具体代码：

//删除图片
deletePic(e) {
	console.log(e);
	this.fileList.splice(e.index, 1)
	this.subImg.splice(e.index, 1)  //新增删除代码
},
// 新增图片
async afterRead(event) {
	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
	let lists = [].concat(event.file)
	let fileListLen = this.fileList.length
	lists.map((item) => {
		this.fileList.push({
			...item,
			status: 'uploading',
			message: '上传中'
		})
	})
	for (let i = 0; i < lists.length; i++) {
		const result = await this.uploadFilePromise(lists[i].url)
		console.log(result);
		if (result.success) {
			let item = this.fileList[fileListLen]
			this.fileList.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
		} else {
			this.fileList.splice(fileListLen, 1)
		}
	}
},
//上传图片
uploadFilePromise(url) {
	return new Promise((resolve, reject) => {
		let a = uni.uploadFile({
			url: config[config.env].apiUrl + '/api/common/upload',
			filePath: url,
			name: 'file',
			success: (uploadRes) => {
				setTimeout(() => {
					let res = JSON.parse(uploadRes.data) //最终传给的是字符串，这里需要转换格式
					if (res.code == 0) {
						this.$common.msg(res.msg)
						resolve({
							success: false,
							url: ''
						})
						return;
					}
					console.log("图片", res.data.url);
					this.subImg.push(res.data.url)  //新增添加代码
					resolve({
						success: true,
						url: res.data.url
					})
				}, 2000)
			}
		});
	})
},