上传图片后、方向颠倒，拍照时旋转镜头反转了，校正后上传

前端通过 Canvas 旋转图片并上传旋转后的数据，确保服务器保存的是正确方向的图片
<template>
  <div>
    <van-uploader
      v-model="fileList"
      :after-read="handleAfterRead"
      multiple
      accept="image/*"
      max-count="3"
      :max-size="5 * 1024 * 1024" <!-- 限制文件大小为5MB -->
      @oversize="onOversize"
    >
      <template #default>
        <div class="upload-area">
          <van-icon name="photograph" />
          <div>点击上传图片</div>
        </div>
      </template>
    </van-uploader>
  </div>
</template>
 
<script>
import { Uploader, Toast } from 'vant';
import Compressor from 'compressorjs';
import axios from 'axios';
 
export default {
  components: {
    [Uploader.name]: Uploader,
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleAfterRead(file) {
      // 处理单文件或多文件上传
      const files = Array.isArray(file) ? file : [file];
      files.forEach(item => {
        this.compressAndUpload(item.file);
      });
    },
    compressAndUpload(file) {
      new Compressor(file, {
        quality: 0.6, // 压缩质量
        maxWidth: 1000, // 最大宽度
        maxHeight: 1000, // 最大高度
        checkOrientation: true, // 启用 EXIF 方向修正
        success: (result) => {
          // 将文件名和文件类型改为小写
          const fileName = result.name.toLowerCase();
          const fileType = result.type.toLowerCase();
          const compressedFile = new File([result], fileName, { type: fileType });
          this.uploadFile(compressedFile);
        },
        error: (err) => {
          console.error('图片压缩失败:', err);
          Toast.fail('图片压缩失败');
        },
      });
    },
    uploadFile(file) {
      const formData = new FormData();
      formData.append('file', file);
      }
   }
}
</script>