前端图片压缩与上传

安装

npm install image-compressor.js

// 压缩js

importImageCompressorfrom'image-compressor.js'

 

// 上传图片

  asyncPostUpload (previewUrl, file, oss, index=-1) {

    letfiles = awaitthis.compressorImage(file.file)

    constself = this.cur;

    constext = file.file.type.split('/')[1];

    // console.log(file, ext, oss, 111);

    letrandomNumber = self.getId();

    constformData = newFormData();

    formData.append('name', file.file.name);

    formData.append('key', oss.dir + randomNumber + file.file.name);

    formData.append('policy', oss.policy);

    formData.append('OSSAccessKeyId', oss.accessid);

    formData.append('signature', oss.signature);

    formData.append('file', files);

    self.$post(oss.host, formData, (res) => {

      console.log(res, '返回值')

      if (res.code < 0) {

        if (index > -1) {

          self.fileList.splice(index, 1)

        }

        file.status = 'failed'

        file.message = '上传失败重新上传'

        returnfalse

      }

　　// 上传进度

    letcompleteval = ((res.loaded / res.total).toFixed(1)) * 100 || 0

    file.status = 'uploading'

    file.message = `${completeval} /100`

    if (completeval === 100) {

      file.status = '1'

      file.message = ''

      letimgUrl = `${previewUrl}/${oss.dir}${randomNumber}${file.file.name}`;

      if (self.socketFileList.indexOf(imgUrl) < 0)

      self.socketFileList.push(imgUrl)

      console.log(self.fileList, self.socketFileList, 666)

    }

    // if (self.fileList.length === self.socketFileList.length)

      // self.homeVM.uploadPicture(self.socketFileList);

    })

  }

  // 文件压缩

  compressorImage (file) {

    returnnewPromise ((resolve, reject) => {

      newImageCompressor(file, {

        quality:.6,  // 压缩比例 (0,1]

        maxWidth:1020,

        maxHeight:2000,

        success(result){

          console.log('压缩前', (file.size/1024), '压缩后', (result.size/1024))

          console.log('实际压缩率', ((file.size - result.size)/file.size * 100).toFixed(2) + '%');

          resolve(result)

        },

        error (e) {

          reject(e)

        }

        })

    })

  }