使用 van-uploader(vant 组件库上传图片组件)上传图片时，

部分 ios 机型，会偶发从手机上传图片后，图片预览中，图片旋转了 90 度的问题。

对于该问题，vant 官网中也给出了解决方案。
但官网中的方案适配的是单选情况下，上传图片时多选图片就会报错。

不论是哪种解决方案，都用到了 Compressor 类，先引入插件。

npm install compressorjs

一 vant 官网解决方案（单选）

首先在元素中加入 before-read 属性，传入 beforeRead 方法。

<van-uploader ... before-read="beforeRead" />

在 beforeRead 方法中使用 Compressor 类对 file 进行校正处理。

...
import Compressor from 'compressorjs';
...export default {...methods: {beforeRead(file) {console.log('开始修正')return new Promise((resolve) => {new Compressor(file, {success: resolve,error(err) {console.log(err.message);},});})}}
}

二 完美解决方案（单选+多选）

首先在还是元素中加入 before-read 属性，传入 beforeRead 方法。

<van-uploader ... before-read="beforeRead" />

在 beforeRead 方法中使用 Compressor 类对 file 进行校正处理，这里有一点变化。

...
import Compressor from 'compressorjs';
...export default {...methods: {beforeRead(file) {console.log('开始修正')return new Promise((resolve) => {if(!Array.isArray(file)) file = [file]const filePromiseArr = file.map(item => {return new Promise((res) => {new Compressor(item, {success: res,error(err) {console.log(err.message);},});});})Promise.all(filePromiseArr).then((res) => {console.log('修正完毕')resolve(res)})}}}
}

三 体验优化

这样就可以了，但是Compressor处理是需要时间的，这时候会导致，从手机中选中图片返回页面后，照片不会立刻出现在预览区域，而是会有几秒钟的空白，这时可以为页面添加toast优化体验。

Toase.loading({message: '',forbidClick: true,
});