微信小程序上传图片功能(附后端代码)
程序员文章站
2023-08-21 20:58:56
几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片。
当然小程序也是可以上传图片的,也写的很清楚。
上传图片
首先选择图片
通过wx.ch...
几乎每个程序都需要用到图片,在小程序中我们可以通过image组件显示图片。
当然小程序也是可以上传图片的,也写的很清楚。
上传图片
首先选择图片
通过wx.chooseimage(object)实现
官方示例代码
wx.chooseimage({ count: 1, // 默认9 sizetype: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片 var tempfilepaths = res.tempfilepaths } })
图片最多可以选择9张, 也可以通过拍摄照片实现,当选择完图片之后会获取到图片路径, 这个路径在本次启动期间有效。
如果需要保存就需要用wx.savefile(object)
上传图片
通过wx.uploadfile(object) 可以将本地资源文件上传到服务器。
原理就是客户端发起一个 https post 请求,其中 content-type为 multipart/form-data。
官方示例代码
wx.chooseimage({ success: function(res) { var tempfilepaths = res.tempfilepaths wx.uploadfile({ url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址 filepath: tempfilepaths[0], name: 'file', formdata:{ 'user': 'test' }, success: function(res){ var data = res.data //do something } }) } })
示例代码
看完了官方文档, 写一个上传图片就没有那么麻烦了,下面是真实场景的代码
import constant from '../../common/constant'; page({ data: { src: "../../image/photo.png", //绑定image组件的src //略... }, onload: function (options) { //略... }, uploadphoto() { var that = this; wx.chooseimage({ count: 1, // 默认9 sizetype: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourcetype: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表,tempfilepath可以作为img标签的src属性显示图片 var tempfilepaths = res.tempfilepaths; upload(that, tempfilepaths); } }) } }) function upload(page, path) { wx.showtoast({ icon: "loading", title: "正在上传" }), wx.uploadfile({ url: constant.server_url + "/fileuploadservlet", filepath: path[0], name: 'file', header: { "content-type": "multipart/form-data" }, formdata: { //和服务器约定的token, 一般也可以放在header中 'session_token': wx.getstoragesync('session_token') }, success: function (res) { console.log(res); if (res.statuscode != 200) { wx.showmodal({ title: '提示', content: '上传失败', showcancel: false }) return; } var data = res.data page.setdata({ //上传成功修改显示头像 src: path[0] }) }, fail: function (e) { console.log(e); wx.showmodal({ title: '提示', content: '上传失败', showcancel: false }) }, complete: function () { wx.hidetoast(); //隐藏toast } }) }
后端代码
后端是用java写的,一开始的时候,后端开始用了一些框架接收上传的图片,出现了各种问题,后来使用了纯粹的servlet就没有了问题, 把代码贴出来省的以后麻烦了。
注意: 代码使用了公司内部的框架,建议修改后再使用
public class fileuploadservlet extends httpservlet { private static final long serialversionuid = 1l; private static logger logger = loggerfactory.getlogger(fileuploadservlet.class); public fileuploadservlet() { super(); } protected void doget(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { jsonmessage<object> message = new jsonmessage<object>(); eosresponse eosresponse = null; string sessiontoken = null; fileitem file = null; inputstream in = null; bytearrayoutputstream swapstream1 = null; try { request.setcharacterencoding("utf-8"); //1、创建一个diskfileitemfactory工厂 diskfileitemfactory factory = new diskfileitemfactory(); //2、创建一个文件上传解析器 servletfileupload upload = new servletfileupload(factory); //解决上传文件名的中文乱码 upload.setheaderencoding("utf-8"); // 1. 得到 fileitem 的集合 items list<fileitem> items = upload.parserequest(request); logger.info("items:{}", items.size()); // 2. 遍历 items: for (fileitem item : items) { string name = item.getfieldname(); logger.info("fieldname:{}", name); // 若是一个一般的表单域, 打印信息 if (item.isformfield()) { string value = item.getstring("utf-8"); if("session_token".equals(name)){ sessiontoken = value; } }else { if("file".equals(name)){ file = item; } } } //session校验 if(stringutils.isempty(sessiontoken)){ message.setstatus(statuscodeconstant.session_token_time_out); message.seterrormsg(statuscodeconstant.session_token_time_out_msg); } string userid = redisutils.hget(sessiontoken,"userid"); logger.info("userid:{}", userid); if(stringutils.isempty(userid)){ message.setstatus(statuscodeconstant.session_token_time_out); message.seterrormsg(statuscodeconstant.session_token_time_out_msg); } //上传文件 if(file == null){ }else{ swapstream1 = new bytearrayoutputstream(); in = file.getinputstream(); byte[] buff = new byte[1024]; int rc = 0; while ((rc = in.read(buff)) > 0) { swapstream1.write(buff, 0, rc); } usr usr = new usr(); usr.setobjectid(integer.parseint(userid)); final byte[] bytes = swapstream1.tobytearray(); eosresponse= serverproxy.getsharedinstance().saveheadportrait(usr, new requestoperation() { @override public void addvaluetorequest(eosrequest request) { request.addmedia("head_icon_media", new eosmediadata(eosmediadata.media_type_image_jpeg, bytes)); } }); // 请求成功的场合 if (eosresponse.getcode() == 0) { message.setstatus(constantunit.success); } else { message.setstatus(string.valueof(eosresponse.getcode())); } } } catch (exception e) { e.printstacktrace(); } finally{ try { if(swapstream1 != null){ swapstream1.close(); } } catch (ioexception e) { e.printstacktrace(); } try { if(in != null){ in.close(); } } catch (ioexception e) { e.printstacktrace(); } } printwriter out = response.getwriter(); out.write(jsonobject.tojsonstring(message)); } protected void dopost(httpservletrequest request, httpservletresponse response) throws servletexception, ioexception { doget(request, response); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。