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

复制代码
<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
		})
	}
相关推荐
青云交2 小时前
Java 大视界 -- 基于 Java 的大数据机器学习模型在图像识别中的迁移学习与模型优化
java·大数据·迁移学习·图像识别·模型优化·deeplearning4j·机器学习模型
2501_909800812 小时前
Java 集合框架之 Set 接口
java·set接口
断剑zou天涯2 小时前
【算法笔记】暴力递归尝试
java·笔记·算法
web打印社区3 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗3 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
Nobody_Cares3 小时前
JWT令牌
java
沐浴露z3 小时前
Kafka入门:基础架构讲解,安装与使用
java·分布式·kafka
神秘的土鸡3 小时前
从数据仓库到数据中台再到数据飞轮:我的数据技术成长之路
java·服务器·aigc·数据库架构·1024程序员节
小光学长3 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
vir024 小时前
P1928 外星密码(dfs)
java·数据结构·算法·深度优先·1024程序员节