上风下云
上风下云
  • 发布:2019-09-18 16:23
  • 更新:2019-09-18 16:24
  • 阅读:2676

【报Bug】uniapp previewImage预览图片时删除图片,预览界面图片仍在

分类:uni-app

详细问题描述

使用uni.previewImage接口创建图片预览后,使用该api自带的长按操作删除当前图片后,在图片预览界面中,该图片依旧在,但是在imgList中其实已经被删除了。
问题就是,删除的图片并未及时反映到预览界面。

[相关代码]

<template>
<view>
<view class="weui-cellstitle">上传图片(限9张)</view>
<view class="weui-cells">
<view class="weui-uploader
bd">
<view class="weui-uploaderfiles" id="uploaderFiles">
<block v-for="(image, idx) in imageList" :key="idx">
<view class="weui-uploader
file"><image class="weui-uploaderimg" :src="image" :data-src="image" @tap.stop="previewImage" mode="aspectFill"></image></view>
</block>
</view>
<view v-if="imageList.length < 9" class="weui-uploader
input-box"><view class="weui-uploader__input" @tap="chooseImage"></view></view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
//图片列表
imageList: [],
countIndex: 9
};
},
onUnload() {
(this.imageList = []), (this.countIndex = 9);
},
onLoad(options) {
},
methods: {
// 图片选择
chooseImage: async function() {
if (this.imageList.length === 9) {
let isContinue = await this.isFullImg();
if (!isContinue) {
return;
}
}
uni.chooseImage({
count: this.countIndex - this.imageList.length,
success: res => {
this.imageList = this.imageList.concat(res.tempFilePaths);
},
fail: err => {}
});
},
isFullImg: function() {
return new Promise(res => {
uni.showModal({
content: '已经有9张图片了,是否清空现有图片?',
success: e => {
if (e.confirm) {
this.imageList = [];
res(true);
} else {
res(false);
}
},
fail: () => {
res(false);
}
});
});
},
// 预览图片
previewImage: function(e) {
var current = e.target.dataset.src;
uni.previewImage({
current: current,
urls: this.imageList,
// 长按删除图片 idx为图片索引
longPressActions:{
itemList: ['删除'],
success: res => {
if (res.tapIndex == 0) {
this.imageList.splice(res.index, 1);
}
},
}
});
},

}  

};
</script>

<style lang="scss">

</style>

[期望]

期望能在预览longPressActions操作的时候删除当前索引的图片能及时反馈到预览组件中,

2019-09-18 16:23 负责人:无 分享
已邀请:
上风下云

上风下云 (作者)

为什么代码格式没了。。

  • 1***@qq.com

    请问你这个最后怎么处理的,删除该怎么做?

    2019-09-20 23:21

  • 上风下云 (作者)

    回复 1***@qq.com: 因为一旦点开预览后,没有方法可以主动调用取消预览图片界面。所以最后我解决办法是不考虑在预览界面长按图片删除了,而是在预览之前的图片列表界面,对每个图片加了@longpress.stop 事件,进行长按删除图片。

    2019-09-21 13:18

该问题目前已经被锁定, 无法添加新回复