h5上传图片并压缩传给后台 base64转为file

主要功能:h5手机端上传图片实现

效果如下:

介绍:之前开始写是没有思路,只想着上传图片功能,但是本次项目是上传图片点赞活动,每次上传5张照片,所以得压缩照片传给后台,我们后台写的接口只接受文件类型,所以没办法前端的处理,首先将图片压缩为base64类型,但这样就不属于文件类型啦,于是查找个各种资料,让吧base64转为blob,然后blob转为file,于是进行了操作,发现将blob转为file只是返回的值与file的值格式一样,并没有真正转为file(最下面回贴代码),之后就想到直接将base64转为file,这样才成功传给后台。

注意:文件上传必须是FormData类型传给ajax,如果打断点会发现传的为空,但是接口信息会显示有值,这个原因我也不知道为什么,下面的样式使用了weui.css(可以去官网查找表单中的uploader样式)

html: 

​
<li>
    //当图片数组有长度时显示
	<div style="width: 100%;" id="uploaderFiles" v-if="imgSrc.length != 0">
		<div class="pictureContent" v-for="(items,index) in imgSrc"
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值