使用者在評價商品時，往往會有上傳圖片的可能，這次來實現一下上傳和刪除使用者上傳圖片的功能

由於我的前端專案使用的框架是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是圖片的點選事件，也就是說如果使用者不想要這個圖片，點選一下即可刪除，暫時滿足了需求。

刪除列表元素的解釋點這裡

拒絕摸魚~