微信小程序上传图片(附后端代码)-白红宇

几乎每个程序都需要用到图片。

在小程序中我们可以通过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

更多精彩请关注微信公众账号likeDev