微信小程序上传图片功能(附后端代码)

作者:于连林520wcf 时间:2023-07-24 04:21:40 

几乎每个程序都需要用到图片,在小程序中我们可以通过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);
}
}

来源:https://blog.csdn.net/yulianlin/article/details/53535387

标签:微信小程序,上传图片
0
投稿

猜你喜欢

  • Vue0.1的过滤代码如何添加到Vue2.0直接使用

    2024-05-22 10:41:57
  • 关于vue2使用element UI中Descriptions组件的遍历问题详解

    2024-05-09 15:15:42
  • Python 中 -m 的典型用法、原理解析与发展演变

    2023-07-09 17:11:40
  • Python socket处理client连接过程解析

    2022-04-30 15:44:31
  • python编写的最短路径算法

    2021-01-15 20:54:14
  • python实现微信远程控制电脑

    2023-07-07 07:43:43
  • Swoole webSocket消息服务系统代码设计详解

    2023-06-09 01:05:28
  • pytorch构建多模型实例

    2021-05-14 13:30:00
  • jQuery渐变发光导航菜单的实例代码

    2024-04-09 19:47:36
  • Mysql出生日期转换为年龄并分组统计人数的方法示例

    2024-01-14 14:58:03
  • Python编程入门之Hello World的三种实现方式

    2021-10-04 12:27:03
  • Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法

    2021-01-16 18:41:38
  • selenium+python自动化测试之页面元素定位

    2021-09-30 18:08:55
  • php+ajax无刷新上传图片实例代码

    2023-11-17 11:27:58
  • asp 随机字符串函数

    2011-04-04 11:01:00
  • 程序员的七夕用30行代码让Python化身表白神器

    2023-10-26 12:27:41
  • 如何恢复MySQL主从数据一致性

    2024-01-26 23:34:33
  • Python中导入模块的几种方式总结

    2023-08-04 17:03:54
  • python基础练习之几个简单的游戏

    2023-06-27 14:22:18
  • ASP ,IP地址分段计算

    2008-04-13 06:55:00
  • asp之家 网络编程 m.aspxhome.com