微信小程序图片上传并展示

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;
    }
}

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