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

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

更新时间：2020年06月19日 17:02:04 作者：于连林520wcf

这篇文章主要为大家详细介绍了微信小程序上传图片功能，还为大家分享了后端代码，具有一定的参考价值微信小程序 图片库，感兴趣的小伙伴们可以参考一下

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