H5直接压缩上传图片到oss服务器

普通 input上传

	 <div class="imgItem">
            <input
              class="file"
              @change="upfile($event,1)"
              type="file"
              accept="image/*"
              name="imgFile"
            >
            <img v-if="img1" :src="img1" alt class="img_item">
            <img src="@images/order/upload.png" alt class="camera" v-show="!img1&&!loading">
            <img src="@images/common/add_loading.gif" alt class="camera" v-show="!img1&&loading">
       </div>

// 点击上传图片，e图片信息  i 评价的第几个商品 最后一个参数代表上传的第几张图片
    upfile(e, i, num) {
      const that = this;
      let file = e.target.files[0];

      let OSS = require("ali-oss");
      const client = new OSS({
        region: "oss-cn-shenzhen",
        accessKeyId: this.oss.AccessKeyId,
        accessKeySecret: this.oss.AccessKeySecret,
        stsToken: this.oss.SecurityToken,
        bucket: this.oss.bucket
      });

      //  文件名:图片名字加上时间戳和9999以内随机数，防止重名
      const imgName = `member_photo/${new Date().getTime()}${Math.floor(
        Math.random() * 10000
      )}${file.name}`;

      // 上传
      client
        .put(imgName, file)
        .then(function(result) {
          console.log("啦啦啦啦啦啦", result.url);
          that.list.forEach((item, index) => {
            if (index == i) {
              if (num == 1) {
                item.imgs.img1 = result.url;
              } else if (num == 2) {
                item.imgs.img2 = result.url;
              } else if (num == 3) {
                item.imgs.img3 = result.url;
              }
            }
          });
        })
        .catch(function(err) {
          console.log("错误", err);
        });
    },

   

vant组件上传

 // 点击上传图片
    onRead(file, detail) {
      var that = this;
      console.log(file);
      this.name = detail.name;
      let OSS = require("ali-oss");
      // base64格式的图片文件
      let urlData = file.content;
      const base64 = urlData.split(",").pop();

      const fileType = urlData
        .split(";")
        .shift()
        .split(":")
        .pop();
      function toBlob(urlData, fileType) {
        let bytes = window.atob(urlData);
        let n = bytes.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bytes.charCodeAt(n);
        }
        return new Blob([u8arr], { type: fileType });
      }
      // base64转blob
      const blob = toBlob(base64, fileType);

      // blob转arrayBuffer
      const reader = new FileReader();
      reader.readAsArrayBuffer(blob);
      reader.onload = function(event) {
        // console.log("英晨", that.oss);

        const client = new OSS({
          region: "oss-cn-shenzhen",
          accessKeyId: that.oss.AccessKeyId,
          accessKeySecret: that.oss.AccessKeySecret,
          stsToken: that.oss.SecurityToken,
          bucket: that.oss.bucket
        });

        // 文件名:图片名字加上时间戳和9999以内随机数，防止重名
        const objectKey = `text/${new Date().getTime()}${Math.floor(
          Math.random() * 10000
        )}${file.file.name}`;
        // arrayBuffer转Buffer
        const buffer = new OSS.Buffer(event.target.result);
        // 上传
        client
          .put(objectKey, buffer)
          .then(function(result) {
            console.log("啦啦啦啦啦啦", result.url);
            // let src = result.url;
            console.log(detail);
            if (detail.name == 1) {
              console.log(document.querySelectorAll(".van-uploader"));
            }
          })
          .catch(function(err) {
            console.log("cuowu", err);
          });
      };
    },

input 压缩上传oss

// 点击上传图片，e图片信息  i 评价的第几个商品 最后一个参数代表上传的第几张图片
    upfile(e, num) {
      this.loading = true;
      const that = this;
      let file = e.target.files[0];

      let OSS = require("ali-oss");
      const client = new OSS({
        region: "oss-cn-shenzhen",
        accessKeyId: this.oss.AccessKeyId,
        accessKeySecret: this.oss.AccessKeySecret,
        stsToken: this.oss.SecurityToken,
        bucket: this.oss.bucket
      });

      // 压缩
      lrz(file, { quality: 0.7 }).then(function(rst) {
        // 处理成功会执行
        console.log("压缩：", rst);

        // 压缩后上传

        //  文件名:图片名字加上时间戳和9999以内随机数，防止重名
        const imgName = `member_photo/${new Date().getTime()}${Math.floor(
          Math.random() * 10000
        )}${rst.origin.name}`;

        // base64格式的图片文件
        let urlData = rst.base64;
        const base64 = urlData.split(",").pop();

        const fileType = urlData
          .split(";")
          .shift()
          .split(":")
          .pop();
        function toBlob(urlData, fileType) {
          let bytes = window.atob(urlData);
          let n = bytes.length;
          let u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bytes.charCodeAt(n);
          }
          return new Blob([u8arr], { type: fileType });
        }
        // base64转blob
        const blob = toBlob(base64, fileType);

        // blob转arrayBuffer
        const reader = new FileReader();
        reader.readAsArrayBuffer(blob);
        reader.onload = function(event) {
          // arrayBuffer转Buffer
          const buffer = new OSS.Buffer(event.target.result);
          // 上传
          client
            .put(imgName, buffer)
            .then(function(result) {
              console.log("啦啦啦啦啦啦", result.url);
              that.loading = false;
              if (num == 1) {
                that.img1 = result.url;
              } else if (num == 2) {
                that.img2 = result.url;
              } else if (num == 3) {
                that.img3 = result.url;
              }
            })
            .catch(function(err) {
              console.log("cuowu", err);
            });
        };
      });
    },