小程序图片上传，后台使用Servlet上传业务逻辑

最近在做小程序图片上传的需求，现在目前进度记录如下：

wxml中的页面代码，参考官网小程序示例，拷贝过来，需要在项目中导入weui.wxss，然后在自己的wxss样式中导入：

@import "../../../pages/ebei/common/lib/weui.wxss";

 <view class="weui-uploader__bd">
      <view class="weui-uploader__files">
          <block wx:for="{{imageList}}" wx:for-item="image">
              <view class="weui-uploader__file">
                    <image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
              </view>
           </block>
       </view>
       <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" bindtap="chooseImage"></view>
       </view>
  </view>

然后就是js代码了，这边需要上传3张图片，由于小程序的的API只能一次上传一张图片，所以采用递归的方式调用。

data: {
    imageList: [],
    sourceTypeIndex: 2,
    sourceType: ['拍照', '相册', '拍照或相册'],

    sizeTypeIndex: 2,
    sizeType: ['压缩', '原图', '压缩或原图'],

    countIndex: 2,
    count: [1, 2, 3],
    recordId:''
 },

chooseImage: function () {
    var that = this
    wx.chooseImage({
      sourceType: sourceType[this.data.sourceTypeIndex],
      sizeType: sizeType[this.data.sizeTypeIndex],
      count: this.data.count[this.data.countIndex],
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
          recordId: ''//重新选择图片需要清空数据
       })
        var successUp = 0; //成功个数
        var failUp = 0; //失败个数
        var length = res.tempFilePaths.length; //总共个数
        var i = 0; //第几个
        console.log(res.tempFilePaths);
        that.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
      }
    })
  },

  previewImage: function (e) {
    var current = e.target.dataset.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  },

  /* 函数描述：作为上传文件时递归上传的函数体体；
 * 参数描述： 
 * filePaths是文件路径数组
 * successUp是成功上传的个数
 * failUp是上传失败的个数
 * i是文件路径数组的指标
 * length是文件路径数组的长度
 */
  uploadDIY(filePaths, successUp, failUp, i, length) {
    var that = this
    wx.uploadFile({
      url: 'http://iscream.ngrok.cc/qpi/FileServlet',
      filePath: filePaths[i],
      name: 'fileData',
      
      success: (resp) => {
        console.log(filePaths[i]);
        console.log('statusCode:'+resp.statusCode);
        if (resp.data != ''){
          that.data.recordId = resp.data;
     }
       if(resp.statusCode == 200){
          successUp++;
        }else{
          failUp++;
        }
      },
      fail: (res) => {
        failUp++;
      },
      
      complete: () => {
        i++;
        if (i == length) {
          //that.showToast('总共' + successUp + '张上传成功,' + failUp + '张上传失败！');
          wx.showModal({
            title: '提示',
            content: '总共' + successUp + '张上传成功,' + failUp + '张上传失败！',
            showCancel: false
          })
        }
        else {  //递归调用uploadDIY函数
          that.uploadDIY(filePaths, successUp, failUp, i, length);
        }
      },
    });
  },

后台的话我这边参考的是采用Servlet的方式，获取请求，然后使用公司项目中的文件服务器地址，写入文件，也可以写入本地磁盘中。

package com.ebei.qpi.wxlogin.servlet;

import java.io.BufferedReader;
import java.io.DataOutputStream;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.net.HttpURLConnection;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;

import javax.annotation.Resource;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.lang.StringUtils;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;

import com.ebei.common.domain.CrmRecordFile;
import com.ebei.common.util.Constants;
import com.ebei.common.util.HttpRequestUtils;
import com.ebei.common.util.SpringContextUtil;
import com.ebei.common.util.UUID;
import com.ebei.qpi.backend.service.CrmRecordFileSerivce;
import com.ebei.qpi.backend.service.ProjectService;

/**
 * 小程序，报事报修图片上传Servlet
 * Servlet implementation class FileServlet
 */
public class FileServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    
    //文件目录
    private String uploadFilePath = "D:\\temp";
    File tempFile;
    
    //打印日志
    protected Log logger = LogFactory.getLog(this.getClass());
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public FileServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(4096);//缓冲区大小
        factory.setRepository(tempFile);//缓冲区目录
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setSizeMax(4194304);//最大文件尺寸,4MB
        SimpleDateFormat dateFormat=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); 

        try {
            List<FileItem> fileItems = upload.parseRequest(request);
            Iterator<FileItem> i = fileItems.iterator();
            boolean flag = false;//判断recordId是否为空
            String value = "";
            while(i.hasNext()){
                FileItem fileItem = i.next();
                String fileName = fileItem.getName();
                
                if (fileItem.getFieldName() != null) {//formData中的数据
                    if (fileItem.isFormField()) {//一般的表单域,即获取formData中的参数
                        value = fileItem.getString("utf-8");
                        System.out.println(value);
                        if (StringUtils.isEmpty(value)) {
                            flag = true;
                        }
                    }
                }
                    
                if (fileName != null) {
                    String uuid = UUID.getUUID();//文件Id
                    //获取Http连接
                    HttpURLConnection conn=HttpRequestUtils.getUrlConnection(Constants.FILE_SERVER, Constants.BUFFER_SIZE);
                    conn.setRequestProperty("type","1");
                    conn.setRequestProperty("source", "s1");
                    conn.setRequestProperty("range", String.valueOf(0));
                    conn.setRequestProperty("filename", uuid+fileName);
                    conn.setRequestProperty("filecreatetime", dateFormat.format(new Date()));
                    conn.setRequestProperty("fileid", uuid);
                    conn.setRequestProperty("totalsize", String.valueOf(fileItem.getSize()));
                    //获取输出流
                    OutputStream out = new DataOutputStream(conn.getOutputStream());
                    //获取输入流
                    InputStream inputStream = fileItem.getInputStream();
                    int length = 0;
                    byte[] buf = new byte[1024];
                    while((length = inputStream.read(buf)) != -1){
                        out.write(buf, 0, length);
                    }
                    out.flush();
                    out.close();
                    // 定义BufferedReader输入流来读取URL的响应
                     BufferedReader reader = new BufferedReader(new InputStreamReader(conn.getInputStream(),"utf-8"));
                     String line = null;
                     while ((line = reader.readLine()) != null) {
                         System.out.println(line);
                         
                     }
                     //保存到本地数据库关联
                     CrmRecordFileSerivce crmRecordFileSerivce = (CrmRecordFileSerivce)SpringContextUtil.getCtx().getBean("crmRecordFileService");
                     CrmRecordFile crmRecordFile = new CrmRecordFile();                                                  
                     crmRecordFile.setCreateTime(new Date());
                     crmRecordFile.setFileId(uuid);
                     crmRecordFile.setFileType("1");
                     crmRecordFile.setState(1);
                     crmRecordFile.setModify("0");
                     if (flag) {//判断关联记录Id是否为空，如果为空，则新增，否则沿用
                        crmRecordFile.setRectId(UUID.getUUID());
                        PrintWriter writer = response.getWriter();//给小程序端发送反馈信息
                        writer.write(crmRecordFile.getRectId());
                        System.out.println("UUID:" + crmRecordFile.getRectId());
                    }else {
                        crmRecordFile.setRectId(value);
                    }
                     crmRecordFileSerivce.save(crmRecordFile);
                }
            }

            System.out.println("upload success");
            
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            logger.info("upload throw exception!");
        }
    }

}

然后在web.xml中配置Servlet：

	<servlet>
    <description></description>
    <display-name>FileServlet</display-name>
    <servlet-name>FileServlet</servlet-name>
    <servlet-class>com.ebei.qpi.wxlogin.servlet.FileServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>FileServlet</servlet-name>
    <url-pattern>/FileServlet</url-pattern>
  </servlet-mapping>

暂时就是这样。

------------------

加上了后台跟小程序交互数据的逻辑，好坑。。。