小程式上傳多張圖檔到springboot背景，傳回可供通路的圖檔連結

最近在做小程式多圖檔上傳到Java背景，Java背景是用springboot寫的。也算是踩了不少坑，今天就來帶大家來一步步實作小程式端多圖檔的上傳。

首先看效果實作圖

小程式端上傳成功的回調

Java端接受到圖檔後的列印

連結可以直接在浏覽器裡打開檢視

其實這兩個截圖就可以看出，我們圖檔上傳成功了，并且給小程式前端傳回了可供通路的圖檔url。

話不多說，直接看代碼。

一，小程式端代碼

1，wxml布局檔案

其實頁面很簡答，一個上傳按鈕，一個選擇圖檔按鈕。一定要記得先選擇圖檔，然後再點選圖檔上傳。

2，js檔案

再來看下js檔案，js檔案裡最重要的就是uploadFile方法

uploadFile方法裡我們請求自己的Java背景接口，進行圖檔上傳。這裡有些注意點要給大家說下

小程式每次隻能上傳單張圖檔
如果采用for循環進行上傳請求會出現并行上傳，并行上傳會出現某一個圖檔漏傳的問題
我采用串行的思路,每張圖檔執行一次上傳請求,請求響應成功後在調用請求上傳第二張圖檔,以此類推。

下面把完整的代碼貼出來給到大家

Page({
  data: {
    img_arr: [],
    formdata: '',
  },
  //點選釋出按鈕
  formSubmit() {
    this.uploadFile(0)
  },
  //上傳圖檔
  uploadFile: function (index) {
    var that = this
    //如果所有圖檔都已經上傳完，就不再往下執行
    if (index >= that.data.img_arr.length) {
      return
    }
    wx.uploadFile({
      url: 'http://localhost:8080/upload/picture', //自己的Java背景接口位址
      filePath: that.data.img_arr[index],
      name: 'content',
      header: {
        "Content-Type": "multipart/form-data",
        'accept': 'application/json',
        'Authorization': 'okgoodit' //若有token，此處換上你的token，沒有的話省略
      },
      formData: ({ //上傳圖檔所要攜帶的參數
        username: "程式設計小石頭",
        password: '2501902696'
      }),
      success: function (res) {
        console.log(`第${index+1}張上傳成功`, res)
        index++
        that.uploadFile(index)
      },
      fail(res) {
        console.log(`第${index+1}張上傳失敗`, res)
      }
    })
  },
  //選擇要上傳的圖檔
  upimg: function () {
    var that = this;
    //這裡小程式規定最好隻能選9張，我這裡随便填的3，你也可以自己改
    if (this.data.img_arr.length < 3) {
      wx.chooseImage({
        sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
        sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，預設二者都有
        success: function (res) {
          that.setData({
            img_arr: that.data.img_arr.concat(res.tempFilePaths)
          });
        }
      })
    } else {
      wx.showToast({
        title: '最多上傳三張圖檔',
        icon: 'loading',
        duration: 3000
      });
    }
  },
})

代碼裡注釋很清楚了。到這裡小程式端基本上完事了。接下來我們看Java背景的實作。

二，Java背景代碼

先來看背景代碼目錄，背景代碼很簡單，就是一個UploadController

這裡的主要實作方法都在uploadPicture

@RequestMapping("/picture")
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String filePath = "";
        request.setCharacterEncoding("utf-8"); //設定編碼
        String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
        File dir = new File(realPath);
        //檔案目錄不存在，就建立一個
        if (!dir.isDirectory()) {
            dir.mkdirs();
        }
        try {
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
            //擷取formdata的值
            Iterator<String> iterator = req.getFileNames();
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String timedata = request.getParameter("timedata");

            while (iterator.hasNext()) {
                MultipartFile file = req.getFile(iterator.next());
                String fileName = file.getOriginalFilename();
                //真正寫到磁盤上
                String uuid = UUID.randomUUID().toString().replace("-", "");
                String kzm = fileName.substring(fileName.lastIndexOf("."));
                String filename = uuid + kzm;
                File file1 = new File(realPath + filename);
                OutputStream out = new FileOutputStream(file1);
                out.write(file.getBytes());
                out.close();
                filePath = request.getScheme() + "://" +
                        request.getServerName() + ":"
                        + request.getServerPort()
                        + "/uploadFile/" + filename;
                System.out.println("通路圖檔路徑:" + filePath + "====username:" + username);
            }
        } catch (Exception e) {
            logger.error("", e);
        }
        return filePath;

    }

這裡我給大家講下實作步驟

1，springboot對外提供接口供小程式通路
2，小程式上傳單個圖檔和額外參數給背景
3，背景把圖檔寫到本地，或者圖檔伺服器，然後傳回對應的圖檔url給到小程式端。

通過上圖可以看出，Java背景傳回了對應的圖檔url給前端，并且可以拿到小程式前端傳的使用者名。

我這裡把完整的代碼貼給大家。

package com.img.demo;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.support.StandardMultipartHttpServletRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.util.Iterator;
import java.util.UUID;

/**
 * 圖檔上傳
 * 程式設計小石頭
 */
@RestController
@RequestMapping("/upload")
public class UploadController {
    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);

    @RequestMapping("/picture")
    public String uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String filePath = "";
        request.setCharacterEncoding("utf-8"); //設定編碼
        String realPath = request.getSession().getServletContext().getRealPath("/uploadFile/");
        File dir = new File(realPath);
        //檔案目錄不存在，就建立一個
        if (!dir.isDirectory()) {
            dir.mkdirs();
        }
        try {
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
            //擷取formdata的值
            Iterator<String> iterator = req.getFileNames();
            String username = request.getParameter("username");
            String password = request.getParameter("password");
            String timedata = request.getParameter("timedata");

            while (iterator.hasNext()) {
                MultipartFile file = req.getFile(iterator.next());
                String fileName = file.getOriginalFilename();
                //真正寫到磁盤上
                String uuid = UUID.randomUUID().toString().replace("-", "");
                String kzm = fileName.substring(fileName.lastIndexOf("."));
                String filename = uuid + kzm;
                File file1 = new File(realPath + filename);
                OutputStream out = new FileOutputStream(file1);
                out.write(file.getBytes());
                out.close();
                filePath = request.getScheme() + "://" +
                        request.getServerName() + ":"
                        + request.getServerPort()
                        + "/uploadFile/" + filename;
                System.out.println("通路圖檔路徑:" + filePath + "====username:" + username);
            }
        } catch (Exception e) {
            logger.error("", e);
        }
        return filePath;
    }
}

至于如何建立springboot項目這麼基礎的知識，我這裡就不再給大家講解了。

小程式上傳多張圖檔到springboot背景，傳回可供通路的圖檔連結

首先看效果實作圖

一，小程式端代碼

二，Java背景代碼

繼續閱讀

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題