微信小程序上傳圖片到服務器（java後臺以及使用springmvc）

由於自己最近在搞微信小程序，然後要做一個上傳商品的模塊，當然就需要上傳圖片了，然而一開始網上查了好幾天關於微信小程序上傳圖片到服務器的，但是一直沒搞定，總是報錯。最後在搜索的過程中看到了一句評論說“如果找不到錯誤的話那就重新做吧”，就是這句話啓發了我，所以我決定不上網查別人的方法，而是自己查看官方提供的API自己摸索着嘗試，結果還真的給做出來了。因爲之前自己網上查找了許多文章都無法解決我的問題，因此我決定寫下這篇文章，希望能幫到有需要的人吧。

需要用到的接口

1、選擇圖片接口

首先看一下官方提供的API接口的參數說明

wx.chooseImage(OBJECT)

從本地相冊選擇圖片或使用相機拍照。

OBJECT參數說明：

參數	類型	必填	說明
count	Number	否	最多可以選擇的圖片張數，默認9
sizeType	StringArray	否	original 原圖，compressed 壓縮圖，默認二者都有
sourceType	StringArray	否	album 從相冊選圖，camera 使用相機，默認二者都有
success	Function	是	成功則返回圖片的本地文件路徑列表 tempFilePaths
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

注：文件的臨時路徑，在小程序本次啓動期間可以正常使用，如需持久保存，需在主動調用 wx.saveFile，在小程序下次啓動時才能訪問得到。

success返回參數說明：

參數	類型	說明	最低版本
tempFilePaths	StringArray	圖片的本地文件路徑列表
tempFiles	ObjectArray	圖片的本地文件列表，每一項是一個 File 對象	1.2.0

File 對象結構如下:

字段	類型	說明
path	String	本地文件路徑
size	Number	本地文件大小，單位：B

示例代碼：

wx.chooseImage({
  count: 1, // 默認9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
  sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
  success: function (res) {
    // 返回選定照片的本地文件路徑列表，tempFilePath可以作爲img標籤的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths
  }
})

結合上面的參數說明，看懂這段代碼應該不難，不過就算看不懂也沒什麼關係，畢竟這只是官方提供的一個API。

2、圖片上傳接口

wx.uploadFile(OBJECT)

將本地資源上傳到開發者服務器。如頁面通過 wx.chooseImage 等接口獲取到一個本地資源的臨時文件路徑後，可通過此接口將本地資源上傳到指定服務器。客戶端發起一個 HTTPS POST 請求，其中content-type 爲multipart/form-data 。

OBJECT參數說明：

參數	類型	必填	說明
url	String	是	開發者服務器 url
filePath	String	是	要上傳文件資源的路徑
name	String	是	文件對應的 key , 開發者在服務器端通過這個 key 可以獲取到文件二進制內容
header	Object	否	HTTP 請求 Header , header 中不能設置 Referer
formData	Object	否	HTTP 請求中其他額外的 form data
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

success返回參數說明：

參數	類型	說明
data	String	開發者服務器返回的數據
statusCode	Number	HTTP狀態碼

示例代碼：

wx.chooseImage({

  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload', //僅爲示例，非真實的接口地址
      filePath: tempFilePaths[0],
      name: 'file',
      formData:{
        'user': 'test'
      },
      success: function(res){
        var data = res.data
        //do something
      }
    })
  }
})

同樣的，結合上面提供的參數說明，這段代碼要看懂也是不難的，主要就是需要知道這兩段代碼如何結合使用，也就是這篇文章主要的內容。

選擇圖片以及上傳圖片

這裏頁面我就不做多好看了。。。

相應的代碼：

<text>index.wxml</text>
<view class="">
  <form bindsubmit="uploadImg">
    <label bindtap="chooseImg">點擊選擇圖片</label>
    <image src="{{photos}}"></image>
    <button form-type="submit">提交</button>
  </form>
</view>

其中image標籤中src屬性裏面的{{photos}}參數則是選擇圖片後的圖片的本地文件路徑，就是說選擇圖片後則會在頁面中顯示該圖片。

當點擊選擇圖片的label時則會調用chooseImg這個方法，也就是需要調用到官方的那個選擇圖片的接口，然後當點擊提交按鈕的時候，則會調用uploadImg這個方法，也就是需要調用到官方的那個上傳圖片的接口。

1、選擇圖片

index.js中的代碼

// index.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    photos: ""
  },
  /**
   * 選擇照片
   */
  chooseImg: function() {
    var that = this
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作爲img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          photos: tempFilePaths
        })
        console.log(that.data.photos)
      }
    })
  }
})

這裏將官方提供的API封裝到chooseImg這個方法中，就是當點擊“點擊選擇圖片”的label的時候就會調用該方法。

同時在頁面也會顯示所選擇的圖片

選擇圖片就已經完成了，接下來就是上傳圖片了。

2、上傳圖片

上傳圖片應該纔是這篇文章的核心內容吧。。。

uploadImg方法代碼（同樣在index.js中）：

  /**
   * 上傳照片
   */
  uploadImg: function() {
    var that = this
    wx.uploadFile({
      url: 'http://localhost:8080/weshop/goods/upload', //僅爲示例，非真實的接口地址
      filePath: that.data.photos[0],
      name: 'file',
      formData: {
        'user': '黑柴哥'
      },
      success: function (res) {
        var data = res.data
        console.log(data)
        //do something
      }
    })
  }

這裏的url就是Java後臺的上傳圖片接口，實際可以更改爲自己服務器的地址。

下面開始介紹後臺代碼

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.io.IOException;

/**
 * 商品信息頁面跳轉控制類
 * @author a柴大隊長
 * @createtime 2017年8月20日10:34:55
 */
@Controller
@RequestMapping("goods")
public class GoodsController {

    private Logger logger = Logger.getLogger(GoodsController.class);

    /**
     * @createtime 2017年8月20日17:15:41
     * @param request
     * @param file
     * @return 上傳成功返回“success”，上傳失敗返回“error”
     * @throws IOException
     */
    @ResponseBody
    @RequestMapping("upload")
    public String upload(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) throws IOException {
        System.out.println("執行upload");
        request.setCharacterEncoding("UTF-8");
        logger.info("執行圖片上傳");
        String user = request.getParameter("user");
        logger.info("user:"+user);
        if(!file.isEmpty()) {
            logger.info("成功獲取照片");
            String fileName = file.getOriginalFilename();
            String path = null;
            String type = null;
            type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;
            logger.info("圖片初始名稱爲：" + fileName + " 類型爲：" + type);
            if (type != null) {
                if ("GIF".equals(type.toUpperCase())||"PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {
                    // 項目在容器中實際發佈運行的根路徑
                    String realPath = request.getSession().getServletContext().getRealPath("/");
                    // 自定義的文件名稱
                    String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName;
                    // 設置存放圖片文件的路徑
                    path = realPath + "/uploads/" + trueFileName;
                    logger.info("存放圖片文件的路徑:" + path);
                    file.transferTo(new File(path));
                    logger.info("文件成功上傳到指定目錄下");
                }else {
                    logger.info("不是我們想要的文件類型,請按要求重新上傳");
                    return "error";
                }
            }else {
                logger.info("文件類型爲空");
                return "error";
            }
        }else {
            logger.info("沒有找到相對應的文件");
            return "error";
        }
        return "success";
    }
}

由於圖片是以content-type爲multipart/form-data的格式上傳的，所以使用spring-mvc可以通過使用參數的形式以二進制的格式獲取到該圖片。

@RequestParam(value = "file", required = false) MultipartFile file

並且需要在spring-mvc.xml文件中加入以下代碼：

    <!-- 文件上傳配置 -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 默認編碼 -->
        <property name="defaultEncoding" value="UTF-8"/>
        <!-- 上傳文件大小限制爲31M，31*1024*1024 -->
        <property name="maxUploadSize" value="32505856"/>
        <!-- 內存中的最大值 -->
        <property name="maxInMemorySize" value="4096"/>
    </bean>

上傳圖片所需要添加的依賴爲：

    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>
    <dependency>
      <groupId>commons-io</groupId>
      <artifactId>commons-io</artifactId>
      <version>2.4</version>
    </dependency>
    <dependency>
      <groupId>commons-codec</groupId>
      <artifactId>commons-codec</artifactId>
      <version>1.9</version>
    </dependency>

完成後，當點擊“提交”按鈕時則會上傳圖片到服務器。

Java控制檯輸出代碼：

執行upload
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 執行圖片上傳
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - user:黑柴哥
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 成功獲取照片
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 圖片初始名稱爲：tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg 類型爲：jpg
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 存放圖片文件的路徑:D:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps\weshop\/uploads/1503221702072tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMc99f14abd61cbebac2b728924beaaecb3.jpg
[INFO][http-bio-8080-exec-7][2017-08-20 17:35:02][com.wechat.weshop.controller.GoodsController] - 文件成功上傳到指定目錄下

圖片也上傳到相應的位置了

最後將代碼發佈到CentOS上測試是否成功，也就是將url中的localhost:8080更改爲服務器的地址。

上傳後通過ls查看uploads文件夾下的文件

[root@iZi1ozk35hjgizZ uploads]# ls
1503222548424tmp_756953327o6zAJs-NzXAG_mUCqaBz3dPQyMMccdc2a843464cd3c3ae2d3c79a2b181a7.jpg

以及查看日誌文件信息

因此，發佈到CentOS也是可以運行的。

該文章到這裏就結束啦！

希望可以幫到需要的人~

也歡迎大家留言探討、問題反饋。

微信小程序上傳圖片到服務器（java後臺以及使用springmvc）

wx.chooseImage(OBJECT)

wx.uploadFile(OBJECT)

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

基於 Milvus + LlamaIndex 實現高級 RAG

【2024-05-21】以茶會友

使用Docker+Jenkins實現Go語言項目的持續集成

微信小程序多圖片上傳至SFTP服務器（後臺通過SpringMVC進行圖片接收）

CentOS通過使用自帶SSH服務結合Nginx搭建SFTP圖片服務器

CentOS 7通過Nginx實現Tomcat動靜分離

Bootstrap模態框高德地圖自動輸入(Autocomplete)失效解決方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結