?HTML部分如下：?

<view class="uPImg">
?? ??? ??? ?<view class="Img">上傳照片 :</view>
?? ??? ??? ?<!-- 上傳圖片 -->
?? ??? ??? ?<view class="shangchuan">
?? ??? ??? ??? ?<view class="sc2" v-for="(item, index) in imgList" :key="index">
?? ??? ??? ??? ??? ?<image class="del" @click="del(index)" src="../../static/del.png" mode=""></image>
?? ??? ??? ??? ??? ?<image class="Img3" :src="item" mode=""></image>
?? ??? ??? ??? ?</view>
?? ??? ??? ??? ?<view class="sc2" v-if="imgList.length < 3" @click="upload"><image class="sc3" src="../../static/upload.png" mode=""></image></view>
?? ??? ??? ?</view>
?? ??? ?</view>

?附帶圖片：

?

?Css：

.shangchuan {width: 90%;height: 200rpx;margin: 0 auto;display: flex;align-items: center;.sc2 {width: 30%;height: 90%;border-radius: 10rpx;background-color: #dadfef;text-align: center;line-height: 240rpx;margin: 0 10rpx;position: relative;// background-color: #4CD964;}.Img3 {width: 100%;height: 100%;border-radius: 10rpx;}.del {width: 32rpx;height: 32rpx;position: absolute;z-index: 1000;top: 0rpx;right: 0;}.sc3 {width: 96rpx;height: 96rpx;border-radius: 10rpx;} }

js部分：?

// 點擊上傳圖片upload() {uni.chooseImage({count: 3, //默認9sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有sourceType: ['album'], //從相冊選擇loop: true,success: res => {console.log(res);if (res.tempFilePaths.length != 0) {this.imgList.push(res.tempFilePaths[0]);}console.log(JSON.stringify(res.tempFilePaths));var tempFilePaths = res.tempFilePaths;console.log(tempFilePaths);console.log(tempFilePaths[0]);uni.uploadFile({url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',filePath: tempFilePaths[0],name: 'file',success: uploadFileRes => {console.log('上傳圖片', JSON.parse(uploadFileRes.data));},fail(err) {console.log(err);}});}});},// 刪除圖片del(index) {this.imgList.splice(index, 1);console.log(this.imgList);},

最后結果：

?

總結

以上是生活随笔為你收集整理的uniapp实现上传图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。