【vue】图片压缩上传
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、需求说明
在上传之前,把选中的图片压缩到100KB以内。
二、解决方法
使用 image-conversion 图片压缩插件
1、安装
yarn add image-conversion
2、引入
import * as imageConversion from 'image-conversion'
3、使用
// 将图片压缩至100KB以内(100即100KB)
imageConversion.compressAccurately(file, 100).then(async res => {
res = new File([res], file.name, {
type: res.type,
lastModified: Date.now()
});
// 这个 res 就是压缩后的图片
});
// 错误写法:会造成压缩后图片格式丢失
// const blob = await imageConversion.compressAccurately(file, 100);
ps:
插件官方文档地址 image-conversion - npm
三、详细代码
/**
* @description: 上传钩子
* @param {object} file 文件
* @return {*}
*/
const beforeUploadFile = async file => {
modalData.file = "";
// 文件后缀
const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
let whiteList = ["png", "jpg"];
// 限制上传文件类型
if (whiteList.indexOf(fileSuffix) === -1) {
message.warning("上传文件格式不正确");
} else {
let formData = new FormData();
// 如果图片大于100kb,则压缩后再上传
if (file.size / 1024 > 100) {
// 压缩图片至100KB以内
imageConversion.compressAccurately(file, 100).then(async res => {
res = new File([res], file.name, {
type: res.type,
lastModified: Date.now()
});
modalData.file = res;
formData.append("file", modalData.fileList);
formData.append("id", picInfo.id);
await uploadFiles(formData);
});
} else {
modalData.file = file;
formData.append("file", modalData.fileList);
formData.append("id", picInfo.id);
await uploadFiles(formData);
}
}
return false;
};
四、参考链接
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)