微信小程序圖片上傳並展示

1.首先編寫微信小程序的頁面和樣式：

index.js

var total = [];
Page({
  data: {
    perImgSrc: []
  },
  onLoad: function (options) {
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady: function () {
    // 頁面渲染完成
  },
  onShow: function () {
    // 頁面顯示
  },
  onHide: function () {
    // 頁面隱藏
  },
  onUnload: function () {
    // 頁面關閉
  },
  chooseImg: function () {
    var that = this;
    wx.chooseImage({
      count: 9, // 默認9
      sizeType: ['original'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths;
        console.info(res.tempFilePaths.length);
        that.uploadFile2(tempFilePaths, 0);
      }
    })
  }, uploadFile2: function (file, i) {//遞歸調用
    var that = this;
    wx.uploadFile({
      url: 'http://localhost:8080/web/uploadImage', //僅為示例，非真實的接口地址
      filePath: file[i],
      name: 'file',
      success: function (res) {
        var obj = new Object();
        obj.ind = i + 1;
        var data = res.data;
        var resultData = JSON.parse(res.data);
        that.setData({
          imageUrl: resultData.url
        });
      }
    })
  }
})

 

index.wxml

<text>單張圖片上傳</text>
<view>
    <image src="{{imageUrl}}"></image> 
</view>   
<button bindtap="chooseImg">選擇圖片</button>

index.wxss

.btn{
  margin-top: 10rpx;
}

 

然后是SpringMVC接收上傳圖片並回顯示：

 

package com.tydic.www.controller;

import java.io.BufferedOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
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 com.tydic.www.common.utils.FileUtil;

@Controller
public class TestController {

    private  static  final Logger LOGGER = Logger.getLogger(TestController.class);

    @RequestMapping("/uploadImage")
    @ResponseBody
    public Object upload(HttpServletRequest request, @RequestParam("file")MultipartFile[] files){
        LOGGER.info("上傳測試");
        Map<String,Object> map = new HashMap<>();
        //多文件上傳
        if(files!=null && files.length>=1) {
            BufferedOutputStream bw = null;
            try {
                String fileName = files[0].getOriginalFilename();
                //判斷是否有文件(實際生產中要判斷是否是音頻文件)
                String UPLOADPATH = request.getSession().getServletContext().getRealPath("/images/");
                if(!StringUtils.isEmpty(fileName)) {
                    //創建輸出文件對象
                    String dirName = UUID.randomUUID().toString()+'.'+ FileUtil.getFileType(new File(fileName));
                    String dirPath = UPLOADPATH + dirName;
                    File outFile = new File(dirPath);
                    //拷貝文件到輸出文件對象
                    FileUtils.copyInputStreamToFile(files[0].getInputStream(), outFile);
                    String url = request.getScheme() +"://" + request.getServerName() + ":" +request.getServerPort() + "/web/images/"+dirName;
                    System.out.println(url);
                    map.put("url", url);
                }
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                try {
                    if(bw!=null) {
                        bw.close();
                    }
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        
        return map;
    }
}

返回的結果直接展示在小程序里：