Shadyree
记录小白的成长过程~

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

由于我的前端项目使用的框架是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是图片的点击事件,也就是说如果用户不想要这个图片,点击一下即可删除,暂时满足了需求。

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

拒绝摸鱼~

posted on 2020-07-27 20:40  Shadyree  阅读(144)  评论(0编辑  收藏  举报