vue自动压缩上传图片
1.下载插件npm i image-conversion --save
2.页面引用:import * as imageConversion from 'image-conversion
3.页面 (ps:若为自动上传,before-upload失效,请移步:https://www.cnblogs.com/gyw1996/p/15817627.html)
<el-upload
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:before-upload="beforeRead"
:file-list="fileList"
:on-remove="handleRemove">
<i class="el-icon-plus"></i>
</el-upload>
4.js文件
beforeRead(file) {
console.log(file)
// 上传之前校验
return new Promise((resolve, reject) => {
console.log('压缩前', file) // 压缩到400KB,大于400KB的图片都会进行压缩,小于则不会此值可自行定义
imageConversion.compressAccurately(file, 400).then(res => { // console.log(res)
res = new File([res], file.name, { type: res.type, lastModified: Date.now() })
console.log('压缩后', res)
resolve(res)
})
})
},
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通