用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)
}
}
})
}
最后,我也是一个初级前端学者,上面的代码还有很多可以优化的地方,希望指正。