uni |
您所在的位置：网站首页 › 手机相册选择照片时为什么总选择第一张 › uni |
uni
|
用uni-app做项目时，上传图片的功能需求应该是在正常不过的了。最近有几个项目都有遇到，所以想总结一下。所用到的api都很简单。 功能需求功能需求如列表所示，视图展现如图所示，代码如下。点击相框按钮可选择图片上传，点击每一个图片可以进行预览，点击每个图片删除图标可删除对应图片。 本地相册选择图片或使用相机拍照上可以预览选择上传的图片删除选错或不选的图片
因为项目中很多地方都用到了下面几个方法，所以我都统一封装在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 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) } } }) }最后，我也是一个初级前端学者，上面的代码还有很多可以优化的地方，希望指正。 |
【本文地址】
今日新闻 |
推荐新闻 |