<template>
          <van-uploader :after-read="afterRead" v-show='is_img' />
      </template>

      npm install exif-js --save   安裝
      import Exif from 'exif-js'

      data() {
         return {
              // 圖片信息
                files: {
                     name: "",
                     type: ""
                 },
         }
      },
    
      // 上傳圖片
      afterRead(file) {
        this.files.name = file.file.name // 獲取文件名
        this.files.type = file.file.type // 獲取類型
        this.imgPreview(file.file)
      },
      // 處理圖片
      imgPreview(file) {
        let self = this
        let Orientation
        //去獲取拍照時(shí)的信息，解決拍出來(lái)的照片旋轉(zhuǎn)問(wèn)題   npm install exif-js --save   這里需要安裝一下包
        Exif.getData(file, function() {
          Orientation = Exif.getTag(this, 'Orientation')
        })
        // 看支持不支持FileReader
        if (!file || !window.FileReader) return
        if (/^image/.test(file.type)) {
          // 創(chuàng)建一個(gè)reader
          let reader = new FileReader()
          // 將圖片2將轉(zhuǎn)成 base64 格式
          reader.readAsDataURL(file)
          // 讀取成功后的回調(diào)
          reader.onloadend = function() {
            let result = this.result
            let img = new Image()
            img.src = result
            //判斷圖片是否大于500K,是就直接上傳，反之壓縮圖片
            if (this.result.length <= 500 * 1024) {
              // 上傳圖片
              self.postImg(this.result);
            } else {
              img.onload = function() {
                let data = self.compress(img, Orientation)
                // 上傳圖片
                self.postImg(data);
              }
            }
          }
        }
      },
      // 壓縮圖片
      compress(img, Orientation) {
        let canvas = document.createElement('canvas')
        let ctx = canvas.getContext('2d')
        //瓦片canvas
        let tCanvas = document.createElement('canvas')
        let tctx = tCanvas.getContext('2d')
        // let initSize = img.src.length;
        let width = img.width
        let height = img.height
        //如果圖片大于四百萬(wàn)像素祸泪，計(jì)算壓縮比并將大小壓至400萬(wàn)以下
        let ratio
        if ((ratio = (width * height) / 4000000) > 1) {
          // console.log("大于400萬(wàn)像素");
          ratio = Math.sqrt(ratio)
          width /= ratio
          height /= ratio
        } else {
          ratio = 1
        }
        canvas.width = width
        canvas.height = height
        //    鋪底色
        ctx.fillStyle = '#fff'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        //如果圖片像素大于100萬(wàn)則使用瓦片繪制
        let count
        if ((count = (width * height) / 1000000) > 1) {
          // console.log("超過(guò)100W像素");
          count = ~~(Math.sqrt(count) + 1) //計(jì)算要分成多少塊瓦片
          //      計(jì)算每塊瓦片的寬和高
          let nw = ~~(width / count)
          let nh = ~~(height / count)
          tCanvas.width = nw
          tCanvas.height = nh
          for (let i = 0; i < count; i++) {
            for (let j = 0; j < count; j++) {
              tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh)
              ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh)
            }
          }
        } else {
          ctx.drawImage(img, 0, 0, width, height)
        }
        //修復(fù)ios上傳圖片的時(shí)候 被旋轉(zhuǎn)的問(wèn)題
        if (Orientation != '' && Orientation != 1) {
          switch (Orientation) {
            case 6: //需要順時(shí)針（向左）90度旋轉(zhuǎn)
              this.rotateImg(img, 'left', canvas)
              break
            case 8: //需要逆時(shí)針（向右）90度旋轉(zhuǎn)
              this.rotateImg(img, 'right', canvas)
              break
            case 3: //需要180度旋轉(zhuǎn)
              this.rotateImg(img, 'right', canvas) //轉(zhuǎn)兩次
              this.rotateImg(img, 'right', canvas)
              break
          }
        }
        //進(jìn)行最小壓縮
        let ndata = canvas.toDataURL('image/jpeg', 0.2)
        tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
        console.log(ndata)
        return ndata
      },
      // 旋轉(zhuǎn)圖片
      rotateImg(img, direction, canvas) {
        //最小與最大旋轉(zhuǎn)方向，圖片旋轉(zhuǎn)4次后回到原方向
        const min_step = 0
        const max_step = 3
        if (img == null) return
        //img的高度和寬度不能在img元素隱藏后獲取同木，否則會(huì)出錯(cuò)
        let height = img.height
        let width = img.width
        let step = 2
        if (step == null) {
          step = min_step
        }
        if (direction == 'right') {
          step++
          //旋轉(zhuǎn)到原位置秕硝，即超過(guò)最大值
          step > max_step && (step = min_step)
        } else {
          step--
          step < min_step && (step = max_step)
        }
        //旋轉(zhuǎn)角度以弧度值為參數(shù)
        let degree = (step * 90 * Math.PI) / 180
        let ctx = canvas.getContext('2d')
        switch (step) {
          case 0:
            canvas.width = width
            canvas.height = height
            ctx.drawImage(img, 0, 0)
            break
          case 1:
            canvas.width = height
            canvas.height = width
            ctx.rotate(degree)
            ctx.drawImage(img, 0, -height)
            break
          case 2:
            canvas.width = width
            canvas.height = height
            ctx.rotate(degree)
            ctx.drawImage(img, -width, -height)
            break
          case 3:
            canvas.width = height
            canvas.height = width
            ctx.rotate(degree)
            ctx.drawImage(img, -width, 0)
            break
        }
      },
      //將base64轉(zhuǎn)換為文件
      dataURLtoFile(dataurl) {
        var arr = dataurl.split(','),
          bstr = atob(arr[1]),
          n = bstr.length,
          u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], this.files.name, {
          type: this.files.type
        })
      },
      // 提交圖片到后端
      postImg(base64) {
        let file = this.dataURLtoFile(base64)
        let formData = new window.FormData()
        formData.append('file', file)
        // 提交圖片
        let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
        this.$axios.post("https://mail.xxxxxxx.com/shop/file/uploadimg", formData, config)
          .then((res) => {
            // console.log(res.data.msg);
            this.img = res.data.msg
            this.fs()
          })
        // Some code
      },