图片上传以及图片压缩

Posted 2021-01-11 nanacln

html：

<input type="file" class="reply-thumb__input" name="image" accept="image/*" @change=‘handleInputChange‘ />

js:

handleInputChange (event) {
      // if (this.picData.length >= 9) return
      // debugger
      const file = event.target.files[0]
      const imgMasSize = 1024 * 1024 * 8
      // 检查文件类型
      if ([‘jpeg‘, ‘png‘, ‘gif‘, ‘jpg‘].indexOf(file.type.split(‘/‘)[1]) < 0) {
        // 自定义报错方式
        // Toast.error(‘文件类型仅支持 jpeg/png/gif！‘, 2000, undefined, false)
        // Toast.fail(‘文件类型仅支持 jpeg/png/gif！‘, 2000)
        // Toast.fail(‘文件类型仅支持 jpeg/png/gif！‘, 2000)
        return
      }
      // 文件大小限制
      if (file.size > imgMasSize) {
        // 文件大小自定义限制
        Toast({
          message: ‘文件大小不能超过2MB！‘,
          className: ‘hint-message‘
        })
        return
      }
      const reader = new FileReader()
      const img1 = event.target.files[0]
      reader.readAsDataURL(img1)
      // reader.onloadend = () => {
      //   this.curImg.url = reader.result
      //   this.curImg.id = this.count++
      // }
      // 判断是否是ios
      // if (window.navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      //   // iOS
      //   this.transformFileToFormData(file)
      //   return
      // }
      // 图片压缩之旅
      this.transformFileToFormData(file)
    },
    transformFileToFormData (file) {
      const formData = new FormData()
      // 自定义formData中的内容
      /*
        三个参数
        file：一个是文件(类型是图片格式)，
        w：一个是文件压缩的后宽度，宽度越小，字节越小
        objDiv：一个是容器或者回调函数
        photoCompress()
         */
      function photoCompress (file, w, objDiv) {
        const ready = new FileReader()
        /* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容. */
        ready.readAsDataURL(file)
        ready.onload = function () {
          let re = this.result
          canvasDataURL(re, w, objDiv)
        }
      }
      function canvasDataURL (path, obj, callback) {
        var img = new Image()
        img.src = path
        img.onload = function () {
          var that = this
          // 默认按比例压缩
          var w = that.width
          var h = that.height
          var scale = w / h
          w = obj.width || w
          h = obj.height || (w / scale)
          var quality = 0.7 // 默认图片质量为0.7
          // 生成canvas
          var canvas = document.createElement(‘canvas‘)
          var ctx = canvas.getContext(‘2d‘)
          // 创建属性节点
          var anw = document.createAttribute(‘width‘)
          anw.nodeValue = w
          var anh = document.createAttribute(‘height‘)
          anh.nodeValue = h
          canvas.setAttributeNode(anw)
          canvas.setAttributeNode(anh)
          ctx.drawImage(that, 0, 0, w, h)
          // 图像质量
          if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
            quality = obj.quality
          }
          // quality值越小，所绘制出的图像越模糊
          var base64 = canvas.toDataURL(‘image/jpeg‘, quality)
          // 回调函数返回base64的值
          callback(base64)
        }
      }
      /**
         * 将以base64的图片url数据转换为Blob
         * param urlData
         *            用url方式表示的base64图片数据
         */
      function convertBase64UrlToBlob (urlData) {
        var arr = urlData.split(‘,‘)
        let mime = arr[0].match(/:(.*?);/)[1]

        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], {type: mime})
      }
      if (file.size > 1024 * 1024) {
        photoCompress(file, {quality: 0.2}, (base64Codes) => {
          var bl = convertBase64UrlToBlob(base64Codes)
          formData.append(‘file‘, bl, ‘file_‘ + Date.parse(new Date()) + ‘.jpg‘) // 文件对象
          this.uploadImg(formData)
        })
      } else {
        // append 文件
        formData.append(‘file‘, file)
        formData.append(‘tag‘, ‘repair‘)
        // 上传图片
        this.uploadImg(formData)
      }
    },
    transformFileToDataUrl (file) {
      const formData = new FormData()
      // 自定义formData中的内容

      // append 文件
      formData.append(‘file‘, file)
      formData.append(‘tag‘, ‘repair‘)
      // 上传图片
      this.uploadImg(formData)
    },
    // 上传图片
    uploadImg (formData) {
      const xhr = new XMLHttpRequest()
      // 进度监听
      // xhr.upload.addEventListener(‘progress‘, (e) => { console.log(e) }, false)
      // 加载监听
      // xhr.addEventListener(‘load‘, ()=>{console.log("加载中");}, false);
      // 错误监听
      const that = this
      xhr.addEventListener(‘error‘, () => {
        // debugger
        that.count--
      }, false)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          const result = JSON.parse(xhr.responseText)
          if (xhr.status === 200 && result.code === 0) {
            // that.picData.push(result.data)
            // 上传成功
            that.uploadImgArr.push(result.data.url)
            console.log(result)
            Toast({
              message: ‘图像上传成功‘,
              className: ‘hint-message‘
            })
            console.log(‘上传头像成功‘)
          } else {
            // 上传失败
          }
        }
      }

      xhr.open(‘POST‘, process.env.API_HOME + ‘/file/upload‘, true)
      xhr.setRequestHeader(‘Authorization‘, window.localStorage.header_token)
      // xhr.open(‘POST‘,‘http://sandbox.gw.fdc.com.cn/homeworkstationapi/homeworkstationapi.restful.inter.img.batchupload‘,true)
      // xhr.open(‘POST‘, ‘http://esf.basetest.fdc.com.cn/homeworkstation/homeworkstation.base.housesourceimg.batchupload‘, true)
      xhr.send(formData)
      that.changeimg = false
    },