uni-app上传图片(选择，预览，删除图片)

用uni-app做项目时，上传图片的功能需求应该是在正常不过的了。最近有几个项目都有遇到，所以想总结一下。所用到的api都很简单。

功能需求

功能需求如列表所示，视图展现如图所示，代码如下。点击相框按钮可选择图片上传，点击每一个图片可以进行预览，点击每个图片删除图标可删除对应图片。

• 本地相册选择图片或使用相机拍照上
• 可以预览选择上传的图片
• 删除选错或不选的图片

<!--出错了就自己写，不知道复制粘贴对没有-->
<view>图片上传</view>
<view style="margin-top: 20rpx;">
	<view class="img" v-for="(item, i) in imgList" :key='i' @click="ViewImage(i)">
			<image style="width: 100%;height: 100%;" :src="item.uri"></image>
			<view @click.stop="DelImg(i)" style="display: inline;">
				<uni-icons type="closeempty" class="close" size="20"></uni-icons>
			</view>
	</view>
	<view class="camera" @tap="ChooseImage">
		<uni-icons type="camera" size="40"></uni-icons>
	</view>
</view>

/* 
	宽高自行调节
	因为锁定了图片的宽高所以上传的图片展示在页面上可能会变形，这个希望大神来个可行方案
*/
.img {
		position: relative;
		display: inline-block;
		width: 166rpx;
		height: 166rpx;
		vertical-align: top;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
.close {
	position: absolute;
	right: 0;
	background-color: rgba(0, 0, 0, .4);
	color: #fff;
}
.camera {
	display: inline-block;
	width: 166rpx;
	height: 166rpx;
	text-align: center;
	line-height: 166rpx;
	font-size: 46rpx;
	border: 1rpx dotted #8C9697;
	color: #8C9697;
	margin-bottom: 10rpx;
}
	

具体实现

因为项目中很多地方都用到了下面几个方法，所以我都统一封装在util.js中了。

图片上传

图片上传可根据uni-app官网uni.chooseImage(OBJECT)进行图片筛选。我这里对图片列表进行了压缩处理。

// _this: 当前的this，如果不想传递this可将该函数改为箭头函数
// key: 此处的key值可省略，因为项目需要所以给了一个标识而已，未传递默认为''和没写一样。
function ChooseImage(_this, key = '') {
	uni.chooseImage({	
		success: (res) => {
		// 拿到上传的图片列表进行遍历压缩。
			let images = res.tempFilePaths;
			for (let i = 0; i < images.length; i++) {
				compressImage(images[i], _this, function(path, name, _this) {
				// 这里的图片数组我给封装成一个对象也是后台需要。自行调节，后面的预览图片同样。 
					_this.imgList.push({
							"name": key + name, 
							"uri": path
					})
				});
			}
			
		}
	})
}
// 压缩图片 
// src: 压缩转换原始图片的路径
// _this: 当前的this，如果不想传递this可将该函数改为箭头函数
// callback: 回调函数，详情chooseImage方法
function compressImage(src, _this, callback) {
	var dstname = "_doc/IMG-" + (new Date()).valueOf() + ".jpg"; //设置压缩后图片的路径 
	var width, height, quality;
	width = "80%";
	height = "80%";
	quality = 80;
	// 具体情况可查看HTML5+文档 ===> http://www.html5plus.org/doc/zh_cn/zip.html#plus.zip.compressImage
	plus.zip.compressImage({
			src: src,
			dst: dstname,
			overwrite: true,
			quality: quality,
			width: width,
			height: height
		},
		function(event) {
			callback(event.target, dstname, _this);
		},
		function(error) {
			return src;
		});
}

图片预览

图片预览同样也是根据官网uni.previewImage(OBJECT)方法进行编写。

// i： 选择的图片索引
// imgList： 自行封装的图片数组
function ViewImage(i, imgList) {
	let imgurl = []
	imgList.forEach(item => imgurl.push(item.uri))
	uni.previewImage({
		urls: imgurl,
		current: imgList[i].uri
	});
}

图片删除

实际就是在图片数组中找到并删除图片。

// i: 删除图片的索引
// _this: 当前的this，如果不想传递this可将该函数改为箭头函数
function DelImg(i, _this) {
	uni.showModal({
		title: '提示',
		content: '确定要删除照片吗？',
		cancelText: '取消',
		confirmText: '确定',
		success: res => {
			if(res.confirm) {
				_this.imgList.splice(i, 1)
			}
		}
	})
}

最后，我也是一个初级前端学者，上面的代码还有很多可以优化的地方，希望指正。