微信H5页面图片上传避坑指南（vant+vue）

公司H5项目涉及图片上传，需要在移动端和微信浏览器内部实现上传，浏览器没啥难度，然后微信踩坑。。。

图片上传的坑

首先，一如既往的获取上传文件的参数信息，这里采用formdata数据上传到自家服务器，浏览器没什么问题，能跑通，然后微信浏览器访问不到，报500

使用了vant组件和vue架构

//结构代码
<!-- 图片上传表单项 --><div class="img-box"><div class="add-img-title">请上传照片</div><van-uploaderid="imgUpload"v-model="item.value"multiplepreview-imagepreview-full-image:data-url="index"@delete="deleteImg":after-read="afterRead"><div class="img-upload-box"><van-icon name="photograph" /></div></van-uploader><div class="add-img-subtitle">请上传有关病情的照片，照片仅自己和医生可见</div></div>//js代码let that = this;// 此时可以自行将文件上传至服务器const forms = new FormData();//这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性forms.append("file", file.file); // 将上传图片信息放进formdata数据中// forms.append("type", "TREAT_IMAGES");let type = "TREAT_IMAGES";axios.post("上传目标服务器域名",forms,type,{//设置请求头信息headers: {"content-type": "multipart/form-data",Authorization: $store.getters.userToken}}).then(res => {//do some 上传成功}).catch(err => {//上传失败});

这套逻辑在移动端浏览器莫得问题，结果微信拉闸，查阅一番之后才发现微信环境下要调用微信的接口上传到微信云端后，后台再根据前端传来的图片id去下载。。。真是大写无语。相关微信文档：传送门

解决方法

一、采用微信sdk接口

优点：微信环境下没有兼容问题，简单快速
缺点：只能在微信浏览器下使用，需要判断当前页面环境，微信中浏览器和移动端浏览器上传操作需要两套逻辑

//图片上传页面结构
<!-- 微信图片上传测试项 --><!-- <div class="img-box"><div class="add-img-title">请上传照片</div><template v-for="(item,index) in arrUploadImgs"><img class="img-upload-box" :src="item.url" ></img></template><div class="img-upload-box" @click="changeImg"><van-icon name="photograph" /></div><div class="add-img-subtitle">请上传有关病情的照片，照片仅自己和医生可见</div></div> -->
//js代码
changeImg(e) {let that = this;// 微信接口wx.chooseImage({count: 9, // 默认9sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success(res) {const localId = res.localIds[0];// 获取本地图片接口// wx.getLocalImgData({//   localId, // 图片的localID//   success: function(res) {//     var localData = res.localData; // localData是图片的base64数据，可以用 img 标签显示//     that.arrUploadImgs.push(localData);//   }// });//选择图片成功，上传到微信图片服务器wx.uploadImage({localId, // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success(res) {let imgId = res.serverId;//下载已上传图片接口/*wx.downloadImage({serverId: imgId, // 需要下载的图片的服务器端ID，由 uploadImage 接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function(res) {alert("下载成功");var localId = res.localId; // 返回图片下载后的本地ID}});*/}});}});},
//实际上在wx.uploadImage之后我们只需要把图片的serverId传送给后端让后端去获取就可以

二、采用base64格式上传

最终自己采用了base64格式上传解决，可以兼容微信和浏览器的环境

<!-- 图片上传表单项 --><div class="img-box"><div class="add-img-title">请上传照片</div><van-uploaderid="imgUpload"v-model="item.value"multiplepreview-imagepreview-full-image:data-url="index"@delete="deleteImg":after-read="afterRead"><div class="img-upload-box"><van-icon name="photograph" /></div></van-uploader><div class="add-img-subtitle">请上传有关病情的照片，照片仅自己和医生可见</div></div>
//js代码
afterRead(file) {let that = this;// 获取上传文件type类型let index = file.file.type.indexOf("/");let type = file.file.type.substr(index + 1, file.file.type.length);//入参let param = {base64Str: file.content,fileType: type,saveType: "TREAT_IMAGES"};//接口上传postUploadFileBase64(param).then(res => {//do some}).catch(err => {//do some});},

目前看来是问题解决了，不知道还有没有更优雅的方法，如果有大佬知道欢迎评论区交流，非常感谢！

样式格式

.img-box {padding: 12px 15px;background-color: #fff;
}
.add-img-title {font-size: 14px;color: #646566;margin-bottom: 15px;
}
.add-img-subtitle {margin-top: 7px;color: #323233;font-size: 12px;
}
.img-upload-box {position: relative;height: 80px !important;width: 80px !important;line-height: 80px !important;text-align: center !important;background-color: #f9f9f9 !important;
}

微信H5页面图片上传避坑指南（vant+vue）相关推荐

公众号 h5 页面图片上传 wx.chooseImage使用
刚开始直接在H5里使用了wx.chooseImage,发现在开发者工具中不断的报错the permission value is offline verifying,慢慢开始搜索才发现在小程序的web ...
微信小程序图片上传九宫格拖拽组件
微信小程序图片上传&九宫格拖拽组件前言图片上传加九宫格拖拽是一个比较常用的组件,常用于发帖或者评论等内容上传模块,我这篇九宫格拖拽的思路是借鉴了一款优雅的小程序拖拽排序组件实现这篇文章实 ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题参考文章: (1)微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题 (2)https://www.cnblogs.com/co ...
移动端H5实现图片上传
效果图基础知识 FormData 通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对.它可以更灵活方便的发送表单数据,因为可以独立于表单使用.如果你把表单的编码类 ...
微信小程序图片上传（文字识别）
要点:OCR文字识别图片上传在最近的项目中遇到需要进行OCR识别,中间遇到的坑记录一下 OCR接口:采用百度OCR通用文字识别在进行调试过程中遇到下列问题: 百度ocr接口1.对图片经行base ...
微信小程序图片上传与内容安全审核
文章目录原由内容审核种类小程序云开发图片检测创建云函数编写图片检测代码小程序图片处理图片上传图片压缩云函数安全检测接入文本检测最后的坑原由之前有开发一个微信小程序,拥有图片 ...
WangEditor富文本编辑器图片上传踩坑之路
最近由于业务需求,需要用到富文本编辑器,找寻了好久,起初想使用百度的ueditor,但在使用的过程中实在是遇到了太多的坑,于是另外锁定了一款富文本编辑器--wangEditor.这是一款轻量级的富文本 ...
微信小程序-图片上传
微信小程序有原生的API接口,来进行图片的选取.上传 wx.chooseImage(Object object) | 微信开放文档 (qq.com)https://developers.weixin. ...
h5 实现图片上传案例
如何在h5 中实现图片上传 ? (单图片上传) 先写一个按钮 ,通过点击按钮触发文件上传的onclick 事件 <div class="btn" onclick=" ...