vue h5 上传图片角度旋转问题

场景还原： 手机上传人脸照片，但是发现图片是旋转了90度，这个奇葩的问题。解决方法如下。

• index.html 引入：

 <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
 

<template>
  <div class="file dc">
    <input ref="upload" accept="image/*" capture="camera" type="file"
      id="upload" class="realfilebt" @change="getFile($event)" />
  </div>
</template>

<script>
import { dataURLtoFile } from "src/assets/scripts/utils";
import axios from "axios";
const axiosInstance = axios.create({});
export default {
  name: "selfphoto",
  props: {
  },
  data() {
    return {
      file: "",
      cUserId: this.$route.query.cUserId,
      fileType: null,
      filename: null
    };
  },
  mounted() {},
  methods: {
    async getFile(e) {
      let that = this;
      // console.info(44, e);
      let file = event.target.files[0];
      console.log("file", file);
      if (!file) {
        return;
      }
      that.fileType = file.type;
      that.filename = file.name;

      var reader = new FileReader();
      var imgUrl = null;
      var Orientation = null;
      reader.readAsDataURL(file);
      EXIF.getData(file, function() {
        Orientation = EXIF.getTag(this, "Orientation");
      });

      // alert("Orientation", Orientation);

      reader.onloadend = function(e) {
        var image = new Image(),
          canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");
        image.src = e.target.result;
        imgUrl = e.target.result;
        image.onload = function() {
          var w = image.naturalWidth,
            h = image.naturalHeight;

          if (w > 1000) {
            h = (h * 1000) / w;
            w = 1000;
          }

          // 6、顺时针90   8、逆时针90   3、180度
          if (Orientation == 6) {
            canvas.width = h;
            canvas.height = w;
            ctx.rotate(Math.PI / 2);
            ctx.drawImage(
              image,
              0,
              0,
              image.naturalWidth,
              image.naturalHeight,
              0,
              -h,
              w,
              h
            );
          } else if (Orientation == 3) {
            canvas.width = w;
            canvas.height = h;
            ctx.rotate(Math.PI);
            ctx.drawImage(
              image,
              0,
              0,
              image.naturalWidth,
              image.naturalHeight,
              -w,
              -h,
              w,
              h
            );
          } else if (Orientation == 8) {
            canvas.width = h;
            canvas.height = w;
            ctx.rotate((3 * Math.PI) / 2);
            ctx.drawImage(
              image,
              0,
              0,
              image.naturalWidth,
              image.naturalHeight,
              -w,
              0,
              w,
              h
            );
          } else {
            canvas.width = w;
            canvas.height = h;
            ctx.drawImage(
              image,
              0,
              0,
              image.naturalWidth,
              image.naturalHeight,
              0,
              0,
              w,
              h
            );
          }

          var data = canvas.toDataURL(that.fileType, 1);
          let file = dataURLtoFile(data, that.filename);
          // console.info(333333, data, file);
          that.upload(file);
        };
      };
    },

    upload(file) {
      Indicator.open({
        text: "请稍等...",
        spinnerType: "snake"
      });
      var that = this;

      var data = new FormData();
      data.append("file", file);
      data.append("ossPathName", "QRImg"); // 文件后缀名

      axiosInstance({
        method: "POST",
        url: ` 修改成你的URL`,
        data: data
        // onUploadProgress: function(progressEvent) {
        //   var percentCompleted = Math.round(
        //     (progressEvent.loaded * 100) / progressEvent.total
        //   );
        //   //console.log(percentCompleted)
        //   //对应上传进度条
        //   self.progress = percentCompleted;
        // }
      })
        .then(async res => {
          console.log("res", res.data.Data.ossUrl);
        })
        .catch(function(err) {
          console.log("err", err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.file {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}
.realfilebt {
  width: 100%;
  height: 100%;
  // background: red;
  opacity: 0;
}
</style>

/**
 * @desc 将base64的图片转为文件流
 * @param {String} dataUrl base64数据
 * @return {Object} 文件流
 */
export const dataURLtoFile = (dataUrl, filename) => {
    // const filename = `img${Date.now()}`;
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
};