用户在评价商品时,往往会有上传图片的可能,这次来实现一下上传和删除用户上传图片的功能
由于我的前端项目使用的框架是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是图片的点击事件,也就是说如果用户不想要这个图片,点击一下即可删除,暂时满足了需求。
拒绝摸鱼~