先说一下遇到的问题，

1.刚开始在开发阶段直接前台用ajax调接口上传图片没问题，可是到了正式服务器部署时，问题出现了。好像是无法跨域（可能是服务器域名化了的原因），但是后台接口方法中已经添加了允许跨域请求的代码：

//跨域请求response.setHeader("Access-Control-Allow-Origin", "*");

2.于是，调整方案，前台 ajax 上传文件提交到后台，在后台调用接口来完成文件上传，代码写完测试时又发现问题了，大一点的图片传到后台时接收不到，部分android手机上传的图片后台也接收不到。

最终的解决方案：

前台使用fetch发起请求，并且将图片转换成 base64字符串再提交到后台，后台解析成图片调用接口完成图片上传。

注意：部分Android手机出现点击图片上传按钮无响应的情况，经排查是下面这段代码的问题。

<input class="weui_uploader_input" name="file" type="file" id="up_file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple />

部分Android手机不支持 H5的multiple 属性，去掉即可（去掉之后在选取图片时一次只能选择一张）

一、前端上传图片：

前端使用 weui 来选取图片。

<div class="weui_uploader z_photo1"> <div class="weui_uploader_bd"> <ul class="weui_uploader_files" id="img2x"> </ul> <div class="weui_uploader_input_wrp"> <input class="weui_uploader_input" name="file" type="file" id="up_file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple /> </div> </div> </div>

js部分，通过fetch将选取到的图片发给后台处理

$(function() {// 允许上传的图片类型var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];// 1024KB*10)，也就是 10MBvar maxSize = 1024 * 10 * 1024;// 图片最大宽度var maxWidth = 9000;// 最大上传图片数量var maxCount = 6;$('#up_file').on('change',function(event) {var files = event.target.files;//console.log(files);//console.log("--files.length--",files.length);// 如果没有选中文件，直接返回if (files.length === 0) {return;}for (var i = 0,len = files.length; i < len; i++) {var file = files[i];var reader = new FileReader();// 如果类型不在允许的类型范围内if (allowTypes.indexOf(file.type) === -1) {$.weui.alert({text: '该类型不允许上传'});continue;}if (file.size > maxSize) {$.weui.alert({text: '图片太大，不允许上传'});continue;}if ($('.weui_uploader_file').length >= maxCount) {$.weui.alert({text: '最多只能上传' + maxCount + '张图片'});return;}//console.log(file.name);var _canvas;reader.onload = function(e) {//console.log('--render.onload-');var img = new Image();img.onload = function() {//console.log('--img.onload-');// 不要超出最大宽度var w = Math.min(maxWidth, img.width);// 高度按比例计算var h = img.height * (w / img.width);var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 设置 canvas 的宽度和高度canvas.width = w;canvas.height = h;ctx.drawImage(img, 0, 0, w, h);var base64 = canvas.toDataURL('image/png');// 插入到预览区var progress = 0;function uploading() {}};var formData = new FormData();formData.append('file', e.target.result);formData.append('busId', "${pkId}");formData.append('fileName', file.name);fetch("${ctx}/wechat/eventReport/uploadFile", {method: 'POST',headers: {},body: formData,}).then((response) = >response.json()).then((responseData) = >{//console.log(responseData);if (responseData.success) {var imgNames = responseData.data;//这里是将图片上传之后，后台返回的图片的存放路径存到了imgArr数据组//    中，方便前台页面上回显上传的图片。for (var i = 0; i < imgNames.length; i++) {var image = imgNames[i];if (image) {imgArr.push(image);}}//这个就是让图片回显在页面上的函数，每个人的处理方式都不一样，就不贴出来了。refreshImg();} else {layer.msg('上传失败！', {time: 2000});}}).catch((error) = >{console.error('error', error);layer.msg('上传失败！', {time: 2000});});};reader.readAsDataURL(file);}});})

二、后台处理图片

先将base64字符串转为图片。这里使用 restTemplate来请求接口，所以需要将图片文件先转为 FileSystemResource类型，

只能先生成一个 FileSystemResource 类型的文件，上传成功之后在删除即可。

 @RequestMapping(value = "/uploadFile",method = RequestMethod.POST)@ResponseBodypublic Map<String,Object> uploadV(HttpServletRequest request,HttpServletResponse response,String file,String fileName,String busId) {Map<String,Object> map = new HashMap<String,Object>();List<String> resList = new ArrayList<String>();try{//file = file.substring("data:image/png;base64,".length(),file.length());file = file.substring(file.indexOf("base64,")+7,file.length());String tempFileName =  UUID.randomUUID().toString().replaceAll("-", "")+fileName.substring(fileName.lastIndexOf("."));//在项目的webapp文件夹下新建一个tempFile文件夹，用来存放生成的临时文件String tempFilePath = request.getSession().getServletContext().getRealPath("/") +"tempFile/" + tempFileName;Base64Utils.Base64ToImage(file, tempFilePath);FileSystemResource resource = new FileSystemResource(tempFilePath);MultiValueMap<String, Object> param = new LinkedMultiValueMap<>();param.add("file", resource);param.add("busId", busId);//Constants.fileUploadUrl 是上传图片的接口的urlString string = restTemplate.postForObject(Constants.fileUploadUrl, param, String.class);//System.out.println(string);new File(tempFilePath).delete();JSONObject json = JSONObject.fromObject(string);if(json.getBoolean("success")){resList.add(json.getString("data"));}map.put("data", resList);map.put("success", true);} catch(Exception e){map.put("success", false);e.printStackTrace();}return map;}

将base64字符串转为图片的工具类：

package *****;
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.hibernate.internal.util.StringHelper;
import Decoder.BASE64Decoder;
public class Base64Utils {/*** base64字符串转换成图片* @param imgStr       base64字符串* @param imgFilePath  图片存放路径* @return** @author ZHANGJL* @dateTime 2018-02-23 14:42:17*/public static boolean Base64ToImage(String imgStr,String imgFilePath) { // 对字节数组字符串进行Base64解码并生成图片if (StringHelper.isEmpty(imgStr)) // 图像数据为空return false;BASE64Decoder decoder = new BASE64Decoder();try {// Base64解码byte[] b = decoder.decodeBuffer(imgStr);for (int i = 0; i < b.length; ++i) {if (b[i] < 0) {// 调整异常数据b[i] += 256;}}OutputStream out = new FileOutputStream(imgFilePath);out.write(b);out.flush();out.close();return true;} catch (Exception e) {return false;}}
}

三、后台接口处理上传过来的图片

上传文件接口，这里 List<MultipartFile> files 中就是接收到的文件了，请自行处理，代码省略了。

  @RequestMapping(value = "/hzz/uploadv", method = RequestMethod.POST)@ResponseBodypublic Object handleFileUploadV(HttpServletRequest request, HttpServletResponse response) {//跨域请求response.addHeader("Access-Control-Allow-Origin", "*");//http://localhost:8086List<MultipartFile> files = ((MultipartHttpServletRequest) request).getFiles("file");}

微信公众号开发使用weui上传图片相关推荐

微信公众号开发系列-12、微信前端开发利器：WeUI
1.前言通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识.后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了.关于手机端的浏览器的兼容性问题相信一直是开发者们 ...
微信公众号开发C#系列-12、微信前端开发利器：WeUI
本文目录 1.前言 2.WeUI基本介绍 2.1 WeUI概述 2.2 为什么选择jQuery WeUI 3.jQuery WeUI基本用法 4.其他基础组件展示 4.1.switch开关 4.2.文 ...
微信公众号开发JSSDK上传图片（多图上传）
前面做了微信公众号开发,涉及到了图片上传功能.微信jssdk-api带有一套完整的调用选择本地图片上传的功能,很多朋友在问到多图上传的问题.在这里分享一下自己的做法,其实并不是自己的做法,就是完全按照 ...
微信公众号开发《四》调用微信JS-SDK实现上传手机图片到服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
微信公众号开发Django 图片处理
title: 微信公众号开发Django-图片处理 date: 2018-06-21 17:03:39 tags: [微信公众号,Django] 微信公众号开发,图片处理部分上篇文章已经获取了wx的 ...
微信公众号开发《四》使用微信JS-SDK实现手机图片上传，支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接,方便大家查阅互相学习: 微信公众号开发<一>OAuth2.0网页授权认证获取用户的详细信息,实现自动登陆微信公众号开发<二>发送模板消息实现消息业务实 ...
微信公众号开发Django-网页授权
原文链接对于基础的微信公众号开发,网页授权,JSSDK,图片处理应该是最重要的三部分了根本上也是按照文档开发,技术含量并不高. (选Django=很多权限控制模块已经做好了,比较省力) 在开始之前 ...
微信公众号开发系列-玩转微信开发-目录汇总
引言最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习.致正在奔跑的您! 在现在这个无处不在的互联网背景下,各种应用已不再仅仅局限于网页或桌面应用了,IOS. ...
手把手教你如何微信公众号开发
最近的话,发现微信开发其实也有很多挺有意思的地方,比如最近很火的一款游戏"跳一跳",也让我如此着迷..但是,今天我所要讲的并不是对于小程序的开发,而是要说一下,关于微信开发的另外一 ...

微信公众号开发使用weui上传图片

一、前端上传图片：

二、后台处理图片

三、后台接口处理上传过来的图片

微信公众号开发使用weui上传图片相关推荐

最新文章

热门文章