uView 上传组件upload，H5下前端压缩图片上传

最新推荐文章于 2024-06-28 13:24:38 发布
最新推荐文章于 2024-06-28 13:24:38 发布
阅读量6.5k 收藏 10
点赞数 4
分类专栏： 技术 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43841757/article/details/111040124
版权
在不支持小程序或APP压缩的情况下，使用uView的Upload组件配合JavaScript实现在H5环境中选择图片后进行压缩，并将压缩后的图片替换原文件进行上传。在实现过程中发现上传文件名可能丢失后缀的问题。
摘要由CSDN通过智能技术生成

前提：Upload 上传
在这里插入图片描述
组件只提供小程序跟APP的压缩方法，但是项目需要H5上传前压缩；

思路：找选择图片（on-choose-complete）回调，选择图片就去压缩，压缩完替换原本的this.$refs.uUpload.lists的file文件；

具体实现：
html

<u-upload class="upLoad-cls" @on-choose-complete="beforeUpload" ref="uUpload" :auto-upload="false" :header="header" :action="action" @on-success="successFn">
				</u-upload>

js

// 上传前函数
beforeUpload (file) {
   
	// #ifdef H5
	// 压缩图片
	this.$tools.compressImg
最低0.47元/天 解锁文章
难道，居然，但是。
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
uniapp - 超详细 H5 网站图片压缩功能，图像上传前进行压缩降低大小并上传到服务器完整示例源码（附带 uview 组件库 u-upload 上传组件与该图片压缩插件 “搭配组合“ 使用教程）
王佳斌
05-06 5884
uniapp 图片图像压缩插件，uniapp uview upload 压缩图片，uniapp如何对图片进行压缩减小体积，uniapp上传图片太慢有什么办法能压缩一下吗，uniapp h5上传前压缩图片降低大小，uniapp中如何压缩图片，uniapp图像上传前如何进行降低质量缩小文件大小，uniapp uview Upload 上传组件怎么在H5网页上图片压缩，uview 上传组件怎么压缩降低图片大小，uniapp图像压缩示例代码，uniapp 照片相片怎么进行上传前的压缩操作，uniapp uview组
微信小程序中上传图片并进行压缩的实现代码
10-18
主要介绍了微信小程序中上传图片并进行压缩的实现代码,文中提到了上传图片并进行压缩的属性值，需要的朋友可以参考下
【uniapp】uniapp 使用uView框架 upload组件压缩图片
梦逸灵箭——的博客
08-18 2127
uniapp中使用uview对相机拍照、选择图片进行压缩上传，可以定义质量比，压缩比。支持多端使用。
uniapp 基于uview2使用upload手动上传多图
最新发布
weixin_57663472的博客
06-28 245
【代码】uniapp 基于uview2使用upload手动上传多图。
uniapp 使用uView框架 upload组件上传前压缩图片
Jadon_z的个人博客
03-29 4573
根据Uview官方文档所说，若是小程序和app项目，上传使用压缩图片，可以配置u-upload组件的sizeType属性为'compress'，但这对H5是无效的。在实际开发中，图片压缩上传经常是一个必要的需求，所以本篇文章主要讲的是在H5项目中如何使用Uview的upload组件进行压缩图片。
uni-app 上传图片并压缩（uView)
杨葱儿
08-04 3071
<view class="" style="background: #fff;padding: 22upx 0;margin-top: 16upx;"> <view class="">拍照上传(至少一张，最多三张)</view> <view class=""> <view class="u-demo-area"> <u-upload :before-remove="beforeRemove" ref="uUpload" :ma.
uview+微信小程序 图片压缩上传
m0_61629497的博客
03-25 544
【代码】uview+微信小程序 图片压缩上传。
H5前端压缩图片后上传后台压缩后上传
10-09
自己编写简单粗暴有效代码！，可以用。利用html5 canvas处理图片，得到图片字节流，上传
uview左滑组件 group-swipe-action-item：修复bug，左滑删除当前行，下一项自动打开左滑删除场景
11-26
uView是一个全面、强大的Vue.js UI组件库，广泛应用于移动H5、微信小程序、uni-app等平台。在这个特定的案例中，我们关注的是uView中的"Group Swipe Action Item"组件，它允许用户通过左滑操作来触发一些特殊功能，...
uview组件源码，含样式
08-26
uview组件源码，含样式
基于uView封装的地址选择弹框组件
03-04
基于uView封装的地址选择弹框组件
uView1.0.zip
11-22
主要解决现在创建uView项目为2.0版本的人群，直接拖进IDE，点击运行即可
uView上传组件upload上传auto-upload模式图片压缩
zoeou的博客
03-19 3828
参照手动上传的代码改的 https://blog.csdn.net/weixin_43841757/article/details/111040124 上传前的钩子before-upload html <u-upload :auto-upload="true" :before-upload="onBeforeUpload" ref="uUpload1" @on-choose-complete="onChooseComplete(1)" ....略其它 </u-upload> js onB
vue2移动端上传，预览，压缩图片，解决拍照旋转问题
热门推荐
xiaogezl的博客
04-13 1万+
因为最近遇到个移动端上传头像的需求，上传到后台的数据是base64位，其中为了提高用户体验，把比较大的图片用canvas进行压缩之后再进行上传。在移动端调用拍照功能时，会发生图片旋转，为了解决这个问题引入了exif去判断拍照时的信息再去处理图片，这是个很好的插件。关于exif.js可以去他的GitHub上了解，这边直接 npm install exif-js --save   安装，然后impo
uniapp,vue,h5页面图片压缩功能
zhuqiang1997的博客
06-21 603
1.这里使用的uniapp组件uni.chooseImage上传图片，vue可通过input type="file"原生进行上传
31.UIImageView 图片等比例压缩显示
三五三的专栏
05-08 837
1.写一个UIimage的类别 如： 定义一个等比例压缩图片的方法 //压缩图片 - (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{     // 创建一个bitmap的context     // 并把它设置成为当前正在使用的context     UIGraphicsBeginImageContext(s
【uview】u-upload组件钩子函数before-upload，this指向false问题
徐海东的博客
04-28 2008
目录 框架背景：uview1.0框架 问题：钩子函数this指向被重写无法获取自身方法与data，H5正常，小程序不正常 涉及组件：u-upload的before-upload，u-tabbar的before-switch 原因： u-upload组件before-upload代码 $u.$parent代码 解决方法： 方法一：页面去掉定义name； 方法二：重写$parent方法,增加一个判断 框架背景：uview1.0框架 问题：钩子函数this指向被重写无法获取自身方法与
vue 实现上传前图片压缩功能
KingCherry的博客
06-20 9869
首先，因为我这边项目是迭代的，只需要添加一个压缩功能，所以我这边是从获取到file之后开始写的。 1.前端： 附件上传 2.return{ headerImage:’’, picValue:’’, } 3.上传前压缩的方法 uploadSectionFile(f) { // 附件上传 let self = this; let Orientation; let ndata; if(f.fi...
关于使用uview 代码体积过大导致微信小程序无法上传问题
lfeishumomol的博客
06-06 1480
ps:使用uview 最终都会被加载进主包,所以如果包的体积太大的话，尽量采用分包,减少包的体积。ps:平时不要打开这个选项，会导致项目的热部署变慢。
uview框架 upload组件压缩图片
12-02
uView框架的Upload组件提供了压缩图片的功能，可以帮助我们在上传图片之前对其进行压缩，以减少图片文件的大小。 在使用Upload组件时，我们可以添加`compress`属性来开启压缩功能。例如： ``` <u-upload :compress="true"></u-upload> ``` 当`compress`属性值为`true`时，Upload组件会自动对上传的图片进行压缩。默认情况下，压缩后的图片大小不会超过1M。如果想要设置自定义的压缩限制，可以使用`compress-quality`和`compress-max-size`属性。 ``` <u-upload :compress="true" :compress-quality="0.8" :compress-max-size="500"></u-upload> ``` 其中，`compress-quality`属性用于设置压缩后的图片质量，取值范围为0到1，默认值为0.92。`compress-max-size`属性用于设置压缩后的图片最大大小，单位为KB，默认值为1024KB（即1M）。 除了以上的属性，Upload组件还提供了`compress-width`和`compress-height`属性，可以用于设置压缩后的图片尺寸。例如，我们可以限制压缩后的图片宽度不超过500像素。 ``` <u-upload :compress="true" :compress-width="500"></u-upload> ``` 通过使用uView框架的Upload组件的压缩功能，我们可以在保持上传图片质量的前提下，减小文件大小，提升图片上传速度，并节省服务器存储空间。
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值