有些手机拍照上传到服务器后，图片会旋转，compressorjs 完美解决了这个问题，另外compressorjs压缩图片效果非常好。
Vue3.0拍照上传旋转90°.jpeg
一、Vant UI库Uploader 组件图片上传：
我工作中使用的是Vant UI库，上传图片也是经常遇到手机拍照照片太大需要压缩，上传后发现神奇的旋转，Uploader组件结合compressorjs的使用既可以压缩图片又能防止图片旋转。
import Compressor from 'compressorjs';
export default {
methods: {
beforeRead(file) {
return new Promise((resolve) => {
// compressorjs 默认开启 checkOrientation 选项
// 会将图片修正为正确方向
new Compressor(file, {
success: resolve,
error(err) {
console.log(err.message);
},
});
});
},
},
};
二、compressorjs的安装使用
1、安装
npm install compressorjs
2、使用格式
file代表要压缩的图片，类型file或blob。
options可选的一些操作。checkOrientation是否检测图片旋转，默认是true。
new Compressor(file[, options])
3、官方案例
html部分
<input type="file" id="file" accept="image/*">
js部分
import axios from 'axios';
import Compressor from 'compressorjs';
document.getElementById('file').addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) {
return;
}
new Compressor(file, {
quality: 0.6,
// The compression process is asynchronous,
// which means you have to access the `result` in the `success` hook function.
success(result) {
const formData = new FormData();
// The third parameter is required for server
formData.append('file', result, result.name);
// Send the compressed image file to server with XMLHttpRequest.
axios.post('/path/to/upload', formData).then(() => {
console.log('Upload success');
});
},
error(err) {
console.log(err.message);
},
});
});
