微信小程序开发之图片上传+Java服务端接收

   Mark一下，也希望可以帮助其他人

    弄了两天，网上找的其他的都有问题，比较完善的一个还是空指针，好吧，还是继续百度然后根据别人的自己改一下！（本地小程序和postman调试上传成功，后续线上再测试）

注：水平有限，可能有需要完善的地方，或者不好的地方，若发现，希望指出来O(∩_∩)O哈哈~ 共同进步。

参考

 

package com.lovepet.pet.biz.controller;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.lovepet.pet.common.Result;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
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.io.PrintWriter;
import java.util.HashMap;
import java.util.Iterator;
import java.util.UUID;

/**
 * 图片上传
 *
 * @author FanChen
 * @since 2018年6月1日 上午12:46:29
 */
@Controller
@RequestMapping("/upload")
public class UploadController {
    private static final Logger logger = LoggerFactory.getLogger(UploadController.class);

    @RequestMapping("/picture")
    public void uploadPicture(HttpServletRequest request, HttpServletResponse response) throws Exception {
        Result result = new Result();

        //获取文件需要上传到的路径
        File directory = new File("..");
        String path = directory.getCanonicalPath() + "\\upload\\";

        // 判断存放上传文件的目录是否存在（不存在则创建）
        File dir = new File(path);
        if (!dir.exists()) {
            dir.mkdir();
        }
        logger.debug("path=" + path);

        request.setCharacterEncoding("utf-8"); //设置编码

        JSONArray jsonArray = new JSONArray();

        try {
            StandardMultipartHttpServletRequest req = (StandardMultipartHttpServletRequest) request;
            Iterator<String> iterator = req.getFileNames();
            while (iterator.hasNext()) {
                HashMap<String, Object> res = new HashMap<String, Object>();
                MultipartFile file = req.getFile(iterator.next());
                // 获取文件名
                String fileNames = file.getOriginalFilename();
                int split = fileNames.lastIndexOf(".");
                //获取上传文件的后缀
                String extName = fileNames.substring(split + 1, fileNames.length());
                //申明UUID
                String uuid = UUID.randomUUID().toString().replace("-", "");

                //组成新的图片名称
                String newName = uuid + "." + extName;
                System.out.println(newName);

                String destPath = path + newName;
                logger.debug("destPath=" + destPath);

                //真正写到磁盘上
                File file1 = new File(destPath);
                OutputStream out = new FileOutputStream(file1);
                out.write(file.getBytes());
                res.put("url", destPath);
                //                result.setValue(jsonArray);
                jsonArray.add(res);

                out.close();
            }
        } catch (Exception e) {
            logger.error("", e);
        }
        result.setValue(jsonArray);

        PrintWriter printWriter = response.getWriter();
        response.setContentType("application/json");
        response.setCharacterEncoding("utf-8");
        printWriter.write(JSON.toJSONString(result));
        printWriter.flush();

    }

}

说明：

 

Result result = new Result();  这个是我自己定义的返回格式，可以去掉或改成自己的格式（下面已更新）

===============2020-03-17===更新Result（看到有需要的，更新了，希望可以帮到你）============

package com.test.health.common;// 你自己的文件位置

import java.io.Serializable;
import java.util.HashMap;
import java.util.Map;

import lombok.EqualsAndHashCode;

import com.alibaba.fastjson.JSONObject;

/**
 * 类Result的实现描述：API接口返回结果封装类
 *
 * @author fanchen
 */
@EqualsAndHashCode
public class Result<T> implements Serializable {
    private static final long   serialVersionUID = -4531596261772981584L;
    private boolean             isSuccess        = true;
    private String              errorMsg;
    private String              errorCode;
    private T                   value;
    private Map<String, Object> extraInfo;

    public Result() {
        super();
    }

    /**
     * 初始化结果值
     *
     * @param value 结果值
     */
    public Result(T value) {
        super();
        this.value = value;
    }

    /**
     * 初始化错误信息，会设置<code>isSuccess = false</code>
     *
     * @param errorMsg 错误信息
     * @param errorCode 错误代码
     */
    public Result(String errorMsg, String errorCode) {
        super();
        this.isSuccess = false;
        this.errorMsg = errorMsg;
        this.errorCode = errorCode;
    }

    /**
     * @param success 是否成功
     * @param errorMsg 错误信息
     * @param errorCode 错误代码
     */
    public Result(boolean success, String errorMsg, String errorCode) {
        super();
        this.isSuccess = success;
        this.errorMsg = errorMsg;
        this.errorCode = errorCode;
    }

    /**
     * @return 是否成功
     */
    public boolean isSuccess() {
        return isSuccess;
    }

    /**
     * @param success 设置是否成功
     */
    public void setSuccess(boolean success) {
        isSuccess = success;
    }

    /**
     * @return 错误信息
     */
    public String getErrorMsg() {
        return errorMsg;
    }

    /**
     * @param errorMsg 设置错误信息
     */
    public void setErrorMsg(String errorMsg) {
        this.errorMsg = errorMsg;
    }

    /**
     * @return 错误代码
     */
    public String getErrorCode() {
        return errorCode;
    }

    /**
     * @param errorCode 设置错误代码
     */
    public void setErrorCode(String errorCode) {
        this.errorCode = errorCode;
    }

    /**
     * @return 结果值
     */
    public T getValue() {
        return value;
    }

    /**
     * @param value 设置结果值
     */
    public void setValue(T value) {
        this.value = value;
    }

    /**
     * @return 扩展信息
     */
    public Map<String, Object> getExtraInfo() {
        return extraInfo;
    }

    /**
     * @param extraInfo 设置扩展信息
     */
    public void setExtraInfo(Map<String, Object> extraInfo) {
        this.extraInfo = extraInfo;
    }

    /**
     * 增加扩展信息
     *
     * @param key 扩展信息中的key
     * @param value 扩展信息中的value
     */
    public Result<T> addExtraInfo(String key, Object value) {
        if (this.extraInfo == null) {
            this.extraInfo = new HashMap<>();
        }
        this.extraInfo.put(key, value);
        return this;
    }

    /**
     * 获取扩展信息
     *
     * @param key 扩展信息中的key
     * @return 扩展信息中的value
     */
    public Object getExtraInfo(String key) {
        return this.extraInfo == null ? null : this.extraInfo.get(key);
    }

    @Override
    public String toString() {
        return JSONObject.toJSONString(this);
    }
}

返回结果是这样的（这个是上传两张图片，Postman就可以上传测试）：

 

 

附上微信小程序的代码：

wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
            var tempFilePaths = res.tempFilePaths
            //上传文件
            wx.uploadFile({
              url: 'http://127.0.0.1:8086/upload/picture',//请求接口地址
              filePath: tempFilePaths[0],//图片路径，如tempFilePaths[0] 为第一张图片
              name: 'image',
              header: {
                "Content-Type": "multipart/form-data"
              },
              success: function (res) {
                console.log(res.data);
              },
              fail: function (res) {
                console.log(res);
              },
              complete: function (res) {

              }
            })
          }
        })