最近写微信小程序有个新需求，就是要上传图片，并且最多只能上传6张图片，上传到6张后，不能再上传了。看了下uniapp组件里的上传图片功能感觉跟我想要的功能有点差别，就自己写了个，先展示一下功能效果吧：

image.png

image.png

image.png

接下来附上我的代码

<view class="upload-image-box">
      <view class="upload-image-item" v-for="(item, index) in totalImg" :key="index">
             <view class="close-icon" @tap="deleteImg(index)">
                  <uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
             </view>
             <view class="image-box"><image :src="item.url" mode="aspectFill" class="img"></image></view>
      </view>
      <view class="upload-image-item" v-if="totalImg.length < 6" @tap="chooseImgs">
               <view class="uploadBtn">
                        <uni-icons type="plusempty" size="40" color="rgba(0, 0, 0, 0.65)"></uni-icons>
                        <view>上传照片</view>
               </view>
      </view>
</view>
<view class="uploadMess">
         <view>
                  上传图片说明
         </view>
         <view>
                  要求：格式PNG/JPG,6M以内，最多6张
         </view>
         <view>
                 内容：图纸等
         </view>
 </view>
<script>
export default {
  data(){
    maxSize: 1024*1024*6, //图片大小限制6M
    maxLength: 6,
    totalImg: [], //原图
    urlImgs: [], // 已上传的图
  },
  methods:{
    //上传图片 单个上传 方便检测每张图片的大小
    chooseImgs: function() {
    const nowCount = this.maxLength - this.totalImg.length;
    const _this = this;
        uni.chooseImage({
            count: 6,
        success: res => {
            uni.showLoading({
                title: '上传中...'
            });
            const tempFilePaths = res.tempFilePaths;
            const tempFiles = res.tempFiles;
            tempFiles.forEach((ele, index) => {
                if (ele.size > _this.maxSize) {
                    return uni.showToast({
                        icon: 'none',
                        title: '图片大小不能超过6MB'
                    });
                }
            });
                        
            // 上传图片到服务器
            for (let i = 0; i < tempFilePaths.length; i++) {
                uni.uploadFile({
                    url: uploadFile, //uploadFile为上传到服务器的接口地址
                    filePath: tempFilePaths[i],
                    name: 'file',
                    success: uploadFileRes => {
                        let url = JSON.parse(uploadFileRes.data).data;
                        this.urlImgs.push(url);
                        this.totalImg.push({
                        url: tempFilePaths[i]
                        });
                        uni.hideLoading();
                     },
                    fail: () => {
                      return uni.showToast({
                        icon: 'none',
                        title: '图片上传失败'
                      });
                    }
                });
            }
        }
      });
      },
      // 删除图片 本地和线上都删除
      deleteImg: function(index) {
        this.totalImg.splice(index, 1);
        this.urlImgs.splice(index, 1);
      },
  }
}
</script>
<style lang="scss" scoped>
    .upload-image-box {
        display: flex;
        flex-wrap: wrap;
        padding: 10px 0;
        .close-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            right: 0;
            top: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #ff5a5f;
            z-index: 2;
        }
        .upload-image-item {
            width: 33.33%;
            position: relative;
            padding-top: 33.33%;
            box-sizing: border-box;
            .image-box {
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 5px;
                right: 0px;
                bottom: 5px;
                left: 0px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                padding: 8px 7px 7px 8px;
                border-radius: 2px;
                overflow: hidden;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .uploadBtn {
                background-color: rgba(0, 0, 0, 0.04);
                position: absolute;
                top: 5px;
                right: 0px;
                bottom: 5px;
                left: 0px;
                padding: 8px 7px 7px 8px;
                border: 1px solid rgba(0, 0, 0, 0.15);
                border-radius: 2px;
                overflow: hidden;
                text-align: center;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .uploadMess {
        text-align: left;
        background-color: #F8F8F8;
        padding-top: 10px;
        padding-left: 12px;
        padding-bottom: 12px;
        border-radius: 4px;
        color: #B3B3BB;
        font-size: 12px;
    }
</style>