在進行圖片拍照上傳功能時,由於現在手機像素越來越好,常常一張照片拍下來好幾M,在上傳時即拉長了上傳時間,用戶體驗糟糕,又增加了服務器壓力。除此之外,iphone手機豎直方向拍照還會存在圖片自動旋轉90度的問題。以爲ic插件是比較好的解決辦法。
首先引入ImageCompressor
npm install image-compressor.js
使用時先引入
import ImageCompressor from 'image-compressor.js';
壓縮時候:
new ImageCompressor(file.file, {
quality: 0.6,
success(result) {
var formData = new FormData();
var date = new Date();
formData.append(
'file',
result,
'IMG_' + date.getFullYear() + (date.getMonth() + 1) + date.getDate() + Math.ceil(Math.random() * 100) + '.jpeg'
);
that.$store
.dispatch({
type: 'uploadImg0',
payload: formData
})
.then((data) => {
that.$set(that.backgroundImg,that.actNow,data);
Toast.clear();
});
},
error(e) {
alert('文件壓縮失敗');
}
});
具體參數配置可查看github:https://github.com/xkeshi/image-compressor