使用 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,
});