uniapp 上传图片 ＋ 预览图片 + 删除图片

图片是用的阿里巴巴矢量图。

<template>
// html部分
   <view class="goods-box">
      <view class="imgList" v-for="(item, key) in fileList" :key="key">
         <image class="del" src="/static/image/delete.png" @click="delImage(key)"></image>
         <image class="imgList" :src="item" @click="previewImg(fileList,key)"></image>
      </view>
           // 这个v-if可以自己适度看自己情况增加或减少
         <image class="imgList" src="/static/image/upload.png" @click="addImage" v-if="fileList.length < 6"></image>
    </view>
</template>

// js部分
<script>
export default {
    data() {
      return {
         fileList: [], // 存储图片的数组，
         urlStr: "" //  后端返回的图片数据拼接
      }
    },
    methods: {
        // 预览图片功能
      previewImg(urls, i) {
        // console.log(urls);
        uni.previewImage({
          urls, //所有要预览的图片的地址集合 必须数组形式 
          current: urls[i] //当前图片地址,点击预览哪个预览的哪个传的 i 是索引
        })
      },
      // 新增图片 
      addImage() {
        const max = 6;
        const count = max - this.fileList.length
        uni.chooseImage({
          count: count,  // 上传图片最多6个可以自己调
          success: (res) => {
            this.fileList = [...this.fileList, ...res.tempFilePaths]
          }
        })
      },

       // 删除图片
      delImage(id) {
        this.fileList.splice(id, 1)
      },


      //  如果需要上传后台 仅供参考
     async upload() {
        for (let i = 0; i < this.fileList.length; i++) {
          let item = this.fileList[i];
          await this.requestMessage(item);
        }
        然后这点上传  接口 传给后端 处理后图片的值
        上传接口（）
        
      }
       // 处理图片 如果需要上传后台 仅供参考
      requestMessage(item) {
        return new Promise((resolve, reject) => {
          uni.uploadFile({
            url: "你们后端接口",
            filePath: item,
            name: 'file',
            success: (res) => {
              let data = JSON.parse(res.data)
              // console.log(data);
              this.urlStr = this.urlStr += data.data.fullurl + ','
              // 后端要求上传图片  https://图片 ， https:// 图片，https: // 图片 
              resolve(); // 返回处理后数据
            }
          })
        })
      },
      
    }
}
</script>

<style lang="scss">
.goods-box {
    display: flex;
    flex-wrap: wrap;

    // 图片列表
    .imgList {
      position: relative;
      width: 180rpx;
      height: 180rpx;
      margin: 0 50rpx 30rpx 0;
    }

    // 删除图片
    .del {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      right: 15rpx;
      z-index: 999;
    }
  }
</style>