主要功能: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"