uniapp+uviewUI 实现上传图片功能u-upload

需求描述：

1.实现点击上传图片至接口1，接口已返回处理后的图片id，path等信息

2.限制上传图片的大小，超过大小进行提示并且取消上传

3.限制上传图片的数量

4.将接口返回的参数和另外的参数传给接口2进行提交

5.默认或已有图片加载显示，预览大图

6.删除图片

常见问题：

1.单个上传图片接口失败

上传时请求头不要加//'content-type'

2.图片预览失败

需要回显的图片，文件格式要至少满足上传到u-upload里的默认文件格式。

UviewUI设计里的u-upload的file格式如下：

所以，特别要注意，thumb和url需要是Blob形式，不然会回显失败

3.在PC端调试正常，APP端上传图片一直在上传中不调用接口

 uni.uploadFile({
          url: upUrl //需要时完整的带根路径的url,baseURL+接口
 });

如还有问题看一下上传时请求头不要加//'content-type'，加上Authorization: uni.getStorageSync("token"),

代码：

      <view style="padding-bottom:20px;font-weight: bold;">上传图片：</view>
      <view>
        <u-upload
          @oversize="oversize"
          :fileList="fileA"
          @afterRead="afterRead"
          @delete="delete" 
          accept="image"//上传文件类型
          name="1"
          multiple // true 时, file 为数组格式，否则为对象格式
          :maxCount="3"//限制图片个数
          :maxSize="4*1024*1024"//限制图片的大小 单位byte 此为4MB
          :previewFullImage="true"//是否开启预览大图
        ></u-upload>
        <view>最多上传3张图片，大小不超过4M</view>
      </view>
      <view class="foot">
      <view v-if="overFlag = 0" @click="submit"
        >确定</view
      >
    </view>

接下来是data的定义：

  data() {
    return {
      fileA: [],
      fileB: [],
      fileC: [],
      overFlag: 0,
    };
  },

对应的函数：

上传:

    //图片超过大小时取消上传
   oversize(e) {
      this.$u.toast("请传4MB以内大小的图片！");
      return false;
    },

    // 上传图片
    async afterRead(event) {
      this.overFlag = 1;
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });

      for (let i = 0; i < lists.length; i++) {
        const result = await this.receiptFile(lists[i].url);
        let a = result.data;
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: lists[i].url,
            imgId:a.data.imgId,
            path:a.data.path,
          })
        );
        fileListLen++;
      }
      this.overFlag = 0;
    },
    
    //上传图片时请求接口获得处理过的图片信息
    receiptFile(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: upUrl //后端地址,
          filePath: url //带过来的参数url,
          name: "file",
          formData: {
            id:"1",
          },
          //自定义请求头
          header: {            
            //这里不要加'content-type'
            Authorization: uni.getStorageSync("token"),
          },
          success: (res) => {            
            let data = JSON.parse(res.data);
            resolve(data);
          },
        });
      });
    },

预览和删除：

注意要展示的图片，文件格式和上传到u-upload里的文件格式要一样。

UviewUI设计里的u-upload的file格式如下：

所以，特别要注意，thumb和url需要是Blob形式，不然会回显失败

    //获得已有的图片并回显
   getOldFile() {
      let params = { id: "1" };
      uni
        .post({
          url: url,
          data: params,
        })
        .then((res) => {
          if (res.code == "0") {
            let oldfile = res.data.oldFile;
            oldfile.forEach((item) => {
              this.fileC.push({
                imgId: item.imgId,
                path:item.path,
                type: "image",
                name: item.name + "." + item.type,
                url: item.url,//需要是blob形式
                thumb: item.url,//需要是blob形式
                status: "uploading",
                message: "加载中...",
              });
            });
          }
        });
      for (let i = 0; i < this.fileC.length; i++) {
        this.fileA.splice(
          i,
          1,
          Object.assign(item, {
            ...this.fileC[i],
            status: "success",
            message: "",
          })
        );
      }
    },


    // 删除图片
    delete(event) {
        let params = {
         imgId:this.fileA[event.index].imgId;
         path:this.fileA[event.index].path;
        }

        uni
          .get({
            url: url,
            data:params,
          })
          .then((res) => {
            if (res.code == "0") {
              uni.showToast({
                title: '删除成功',
                icon: "none",
              });
            }
          });
      }
      this[`fileList${event.name}`].splice(event.index, 1);
    },

提交：

    submit() {
      this.fileB = this.fileA
    
      let params = {
        id:"1",
        fileList: this.fileB,
        //有其他要一起上传的参数写在这里
      };
      uni
        .post({
          url: url,
          data: params,
        })
        .then((res) => {
          if (res.code == "0") {
            this.fileA = [];
            this.fileB = [];
            this.fileC = [];
            uni.showToast({
              title: '图片已提交！',
              icon: "none",
            });
          }
        });
    },