【前端】用户评价页面评价图片删除

标签：使用   eva   alt   width   sha   tempfile   image   src   lazy   

用户在评价商品时，往往会有上传图片的可能，这次来实现一下上传和删除用户上传图片的功能

由于我的前端项目使用的框架是uni-app，所以我们直接使用uni-app中的api进行图片的选择

直接看官网的示例

uni.chooseImage({
    count: 6, //默认9
    sizeType: [‘original‘, ‘compressed‘], //可以指定是原图还是压缩图，默认二者都有
    sourceType: [‘album‘], //从相册选择
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

可以看到这里的sourceType会直接从相册选择图片，当然还可以把sourceType的参数改为camera或者两个都写，

效果如图所示（样式搞得有点丑，不要在意）

<view class="evaluate_five flex">
				<view v-for="(item,index) in upload" class="flex evaluate_five_cents " @click="deleteImg(item)">
					<image :src="item" mode="widthFix" ></image>
				</view>
				<view class="evaluate_updateimg flex " v-show="visable" @click="uploadImage">
					<image :src="revise"  mode="widthFix"></image>
					<view>上传照片</view>
				</view>
</view>

这个是显示图片的代码，可以看到deleteImg是图片的点击事件，也就是说如果用户不想要这个图片，点击一下即可删除，暂时满足了需求。

删除列表元素的解释点这里

拒绝摸鱼~

【前端】用户评价页面评价图片删除

标签：使用   eva   alt   width   sha   tempfile   image   src   lazy   

原文地址：https://www.cnblogs.com/shadyree/p/13387514.html