uniapp上传图片、展示图片、预览图片、长按删除图片

uniapp上传图片、展示图片、预览图片、长按删除图片

上传图片、展示图片、预览图片、长按删除图片

1. 上传图片: uni.chooseImage上传图片之后可以获得文件的临时路径.
2. 展示图片: success返回参数中, tempFilePaths为图片的本地文件路径列表, tempFiles为图片的本地文件列表. 展示图片将这些路径放在src中.
3. 预览图片: 使用uni.previewImage预览图片, 其中urls接收的是预览图片链接列表.current为当前显示图片的链接/索引值.
4. 长按删除图片: 将存放图片的数组或字符串清空

实例:

<template><view class="all"><view class="image"><view class="imageText" @click="seleckImage" v-if="imgSrc" style="vertical-align: top;">选择图片</view><view class="imgSrc" v-else><image mode="heightFix" v-for="(item,index) in imgArr" :src="item" @click="preview(item)" @longtap="delImg"></image></view></view></view>
</template><script>export default {data() {return {imgArr: [], //存放图片数组imgSrc: true //控制文字和图片显隐}},onLoad() {},methods: {seleckImage() {let that = thisuni.chooseImage({count: 1, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album','camera'], //从相册选择success: function(res) {console.log('选择图片')console.pFilePaths)// 将数组存放在数组中that.imgArr = pFilePathsthat.imgSrc = ImageInfo({src: pFilePaths[0],succenn: function(img) {console.log('预览图片')console.log(img)},fail: function(err) {console.log(err)}})},fail: function(err) {console.log(err)}});},// 点击图片进行预览preview(img) {console.log('预览')// 新建一个存放预览图片的空数组var imgArr = []imgArr.push(img)uni.previewImage({urls: imgArr,current: imgArr[0],longPressActions: {itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');},fail: function(err) {console.Msg);}}});},// 长按删除图片delImg() {let that = thisuni.showModal({title: '删除图片',content: '确定删除图片?',success: res => {if (firm) {// 删除图片 将数据置空that.imgSrc = truethat.imgArr = []} else if (res.cancel) {console.log('用户点击取消');}}})}}}
</script><style lang="less">.all {padding: 20rpx;.image {box-sizing: border-box;border: 2rpx dashed #666666;height: 440rpx;.imageText {text-align: center;line-height: 440rpx;}.imgSrc {height: 440rpx;text-align: center;image {height: 100%;}}}}
</style>