微信小程序上傳圖片(附後端代碼)

幾乎每個程序都需要用到圖片。
在小程序中我們可以通過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);
    }

}

更多精彩請關注微信公衆賬號likeDev