Vant Uploader 组件图片拍照上传之后,图片发生90°旋转问题

Vant 官方给出的解答需要自己解决,没有处理。
在这里插入图片描述
解决办法主要使用了 compressorjs 插件库

自己的例子大家参考:

<van-uploader
   max-count="1"
   v-model="othersCardPositive"
   :before-read="uploadOthersCardPositive"
   accept="image/*"
   multiple
 />
 const uploadOthersCardPositive = (file) => {
   uploadRequestFunc(file, "othersCardPositive");
 };


const uploadRequestFunc = (file, key) => {
  if (file.length > 1) {
    createMessage("一次最多只能上传一张!");
    return false;
  }

  new Comporessor(file, {
    success(result) {
      // Blob 转换为 File
      const files = new window.File([result], file.name, { type: file.type });
      
      const fd = new FormData();
      fd.append("file", files);
      
      // 上传接口
      uploadImage(xxx, fd)
        .then((res) => {
          const { data } = res;
          if (isObjEmpty(data)) {
            createMessage("上传失败!");
            return false;
          } else {
            let list = state[key].slice();
            list.push({
              url: res.data.url,
              isImage: true,
            });
            state[key] = list;
            return true;
          }
        })
        .catch((err) => {
          console.log(err);
          createMessage("上传失败!");
          return false;
        });
    },
    
    error(err) {
      console.log(err.message);
    },
  });
};

你可能感兴趣的:(前端,Vant)