layui使用upload组件上传图片前的压缩
程序员文章站
2022-04-08 09:34:12
...
对于很多情况,我们都有在前端压缩图片后再上传的需求,如果是单独的上传过程直接做就可以,但对于layui这种框架就需要注意下了。
具体方法如下(前端压缩图片我使用的是image compressor这个JS库):
upload.render({
elem: '#uploadpicbtn'
, url: somewhere //必填项
, auto: false
, choose: function (obj) {
obj.preview(function (index, file, result) {
newfile = new ImageCompressor(file, {
quality: 0.6,
maxWidth: 800,
maxHeight: 800,
success(result) {
obj.resetFile(index, result, file.name);
}
});
});
}
, bindAction: '#startpreview'
, done: function (res) {
//do something.
}
});
重点就是,在choose阶段,就把文件压缩并使用resetFile方法重写到upload组件里,这里其实还可以在压缩阶段,把上传按钮做一个disable,我偷懒了。
推荐阅读
-
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
-
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
-
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
-
基于vue-upload-component封装一个图片上传组件的示例
-
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
-
AntD框架的upload组件上传图片时遇到的一些坑
-
vue-cli3.0+element-ui上传组件el-upload的使用
-
在vue项目中使用element-ui的Upload上传组件的示例
-
使用js在layui中实现上传图片压缩
-
用element的upload组件实现多图片上传和压缩的示例代码