【uniapp】使用uviewplus来实现图片上传和图片预览功能

米粒宝的爸爸2025-07-21 20:16

复制代码

<up-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" @click-preview="showImg" name="1" multiple :maxCount="5"
				style="margin-top: 20px;min-height: 100px; margin-left: 10px;margin-right: 10px;" uploadText="图片上传" :previewFullImage="true"></up-upload>

新增图片

复制代码

	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
		
	};

	const uploadFilePromise = (url) => {
		imgShowLoading()
		var base = getApp().globalData.baseUrl;
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: base + 'device/deviceTaskFile/upload',
				filePath: url,
				name: 'file',
				header: {
					'X-Access-Token': getAccessToken()
				},
				formData: {
					user: 'test',
				},
				success: (res) => {
					var json = JSON.parse(res.data)
					var message = json.message;
					setTimeout(() => {
						baseHideLoading()
						resolve(message);
					}, 1000);
				},
			});
		});
	};

删除图片

复制代码

	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
	};

显示预览

复制代码

const showImg=(event) => {
		const baseUrl = getApp().globalData.baseUrl + "sys/common/static/"
		const url=[baseUrl+event.url]
		uni.previewImage({
			current: 0,
			urls:url
		})
	}