uniapp上传图片前压缩

uniapp上传图片前压缩

• 结构

 <!--图片上传-->
        <view>
          <view
            class="uni-hello-addfile demo"
            @click="chooseImage"
            v-if="imageSrc.length < 9"
            >+ 图片（{{ imageSrc.length }}/9）
          </view>
          <scroll-view
            :scroll-top="scrollTop"
            scroll-y="true"
            class="scroll-Y"
            style="max-height: 5.333rem;margin-top: 0.533rem  /* 10/18.75 */;"
            @scroll.stop.prevent="scroll"
            v-if="imageSrc"
          >
            <view v-for="(imgSrc, imgIndex) in imageSrc" class="img">
              <image
                :src="judgeImgSrc(imgSrc)"
                @click="preview(imgIndex)"
                class="img2"
              ></image>
              <uni-icons
                type="close"
                size="20"
                style="position: absolute;right: 0;top: 0;"
                color="#1890FF"
                @click="deleteImg(imgIndex)"
              ></uni-icons>
            </view>
          </scroll-view>
        </view>

• 方法

//选择图片
    chooseImage: function() {
      let _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: ["album"],
        success: (res) => {
          console.log("success", res.tempFiles[0]);
          // if (res.tempFiles[0].size > 10 * 1024 * 1024) {
          //   uni.showToast({
          //     title: "文件大小超过10M",
          //     image: "/static/fail.png",
          //     duration: 2000,
          //   });
          //   return false;
          // }
          uni.showLoading({
            title: "正在上传...",
            duration: 2000,
          });
          console.log("文件信息", res.tempFilePaths[0], res.tempFiles[0].size);
          let path = res.tempFilePaths[0];
          let reader = new FileReader();
          reader.readAsDataURL(res.tempFiles[0]);
          reader.onload = function(e) {
            let base64 = e.target.result; //转码过后的base64编码
            console.log("压缩前", e);
            let content = path; //图片的src，base64格式
            let img = new Image();
            img.src = content;
            img.onload = function() {
              //图片加载完毕
              _this.compressEvent(img, (dataURL) => {
                // console.log("dataURL", dataURL); //base64                
                _this.uploadImg(dataURL); //这是上传图片的方法
              });
            };
          };
        },
        fail: (err) => {
          // #ifdef MP
          uni.getSetting({
            success: (res) => {
              let authStatus = res.authSetting["scope.album"];
              if (!authStatus) {
                uni.showModal({
                  title: "授权失败",
                  content: "需要从您的相册获取图片，请在设置界面打开相关权限",
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting();
                    }
                  },
                });
              }
            },
          });
          // #endif
        },
      });
    },
    //上传图片
    uploadImg(img) {
      let that = this;
      uni.uploadFile({
        url: that.$store.state.commonUrl + "/api/sub-user/upload-image",
        filePath: img,
        fileType: "image",
        name: "fileInfo",
        formData: {
          uid: localStorage.getItem("uid"),
        },
        header: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
        success: (res) => {
          uni.hideLoading();
          if (JSON.parse(res.data).error == 0) {
            uni.showToast({
              title: "上传成功",
              icon: "success",
              duration: 2000,
            });
            that.imageSrc.push(JSON.parse(res.data).data.local_path);
          } else {
            uni.showToast({
              title: JSON.parse(res.data).error_msg,
              image: "/static/fail.png",
              duration: 2000,
            });
          }
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showModal({
            content: err.errMsg,
            showCancel: false,
          });
        },
      });
    },
    //压缩
    compressEvent(img, callback) {
      let canvasWidth = img.width; //图片原始宽高
      let canvasHeight = img.height;
      //图片宽高比
      let base = canvasWidth / canvasHeight;
      //宽度最大设为1024
      if (canvasWidth > 1024) {
        canvasWidth = 1024;
        canvasHeight = Math.floor(canvasWidth / base);
      }
      //绘制图像到画布
      let canvas = document.createElement("canvas");
      let ctx = canvas.getContext("2d");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      //将画布转为base64，mimeType类型为image/jpeg，图片质量为0.3
      let dataURL = canvas.toDataURL("image/jpeg", 0.3);
      // console.log("压缩中", dataURL);
      callback ? callback(dataURL) : null; //调用回调函数
    },```