关于实现微信小程序一次性上传多张图片所遇到问题的解决方案

关于微信小程序的上传图片，网上有很多实现方案，本文主要参考https://blog.youkuaiyun.com/lili625/article/details/77783300该博文，主要针对使用过程中遇到的问题做以简单的说明。

首先简单介绍一下，实现方式：

java后台实现代码如下：

 /**
     * 图片上传
     *
     * @return
     * @throws Exception
     */
    //@ExcLoginInterceptor 自定义的拦截器注解
    @RequestMapping(value = "/upload",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String uploadPicture(HttpServletRequest request) throws Exception{
        String message = IConstants.Response_S.FAILED;
        //获取文件需要上传到的路径
        String path = request.getServletContext().getRealPath("/upload")+"/";
        File dir = new File(path);
        if (!dir.exists()) {
            dir.mkdir();
        }
        try {
            request.setCharacterEncoding("utf-8");  //设置编码
            //获得磁盘文件条目工厂
            DiskFileItemFactory factory = new DiskFileItemFactory();

            //如果没以下两行设置的话,上传大的文件会占用很多内存，
            //设置暂时存放的存储室,这个存储室可以和最终存储文件的目录不同
            factory.setRepository(dir);
            //设置缓存的大小，当上传文件的容量超过该缓存时，直接放到暂时存储室
            factory.setSizeThreshold(1024 * 1024);
            //文件上传处理
            ServletFileUpload fileUpload = new ServletFileUpload(factory);
            List<FileItem> list =fileUpload.parseRequest(request);
            FileItem picture = null;
            for (FileItem item : list) {
                //获取表单的属性名字
                String name = item.getFieldName();
                //如果获取的表单信息是普通的 文本 信息
                if (item.isFormField()) {
                    //获取用户具体输入的字符串
                    String value = item.getString();
                    request.setAttribute(name, value);
                } else {
                    picture = item;
                    //根据当前时间生成图片的名称（需要自己封装写方法--当然也可以按自己的规则生成图片名称）
                    String pictureName = DateTool.dateToMS_Str(new Date()).replaceAll(" ","").replaceAll("-","").replaceAll(":","").replace(".","");
                    //自定义上传图片的名字
                    String fileName = pictureName+".jpg";
                    String destPath = path + fileName;
                    //此处可以保存与数据库，代码省略……    
                    //真正写到磁盘上
                    File file = new File(destPath);
                    OutputStream out = new FileOutputStream(file);
                    InputStream in = picture.getInputStream();
                    int length = 0;
                    byte[] buf = new byte[1024];
                    // in.read(buf) 每次读到的数据存放在buf 数组中
                    while ((length = in.read(buf)) != -1) {
                        //在buf数组中取出数据写到（输出流）磁盘上
                        out.write(buf, 0, length);
                    }
                    message=IConstants.Response_S.SUCCESS;
                    in.close();
                    out.close();
                }
            }

        } catch (FileUploadException e1) {
            logger.error("", e1);
            message=IConstants.Response_S.FAILED;
        } catch (Exception e) {
            logger.error("", e);
            message=IConstants.Response_S.FAILED;
        }
        return message;
    }

小程序代码如下：

① 上传图片具体实现：

uploadimg: function (data) {
    var that = this,
    i = data.i ? data.i : 0,
    success = data.success ? data.success : 0,
    fail = data.fail ? data.fail : 0;
    wx.uploadFile({
      url: data.url,
      filePath: data.path[i],
      name: 'file',
      formData: {
        //此处可以传自定义参数……
      },
      header: {
        "Content-Type": "multipart/form-data",
        //"sessionId": getApp().globalData.sessionId,
      },
      success: (resp) => {
        success++;
      },
      fail: (res) => {
        fail++;
      },
      complete: () => {
        i++;
        if (i == data.path.length) {   //当图片传完时，停止调用
          wx.showToast({
            title: '上传成功',
            duration: 1500,
            mask: 'false'
          })
          that.setData({
            tempFilePaths: []
          })
        } else {//若图片还没有传完，则继续调用函数
          data.i = i;
          data.success = success;
          data.fail = fail;
          that.uploadimg(data);
        }
      }
    });
  },

②上传图片

data: {
    tempFilePaths:[],
},
upload:function(e){
    var pics = this.data.tempFilePaths
    //调用上传图片的具体实现
    this.uploadimg({
      url: config.serverUrl + '/upload',
      path: pics,//这里是选取的图片的地址数组
    });
},

代码亲测可实现，下面简单就运用上述代码所遇到的问题做以简单介绍。

问题1.后台使用如下代码，获取的list为空，即获取不到前端传过来的数据。

            ServletFileUpload fileUpload = new ServletFileUpload(factory);
            List<FileItem> list =fileUpload.parseRequest(request);

解决方案：如果后台使用springMVC搭建的，就需要将springMVC的配置文件中的文件上传配置删掉，即把如下的配置删除。

<!-- 文件上传 -->
    <bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--<property name="defaultEncoding" value="UTF-8"/>-->
        <!-- 设置上传文件的最大尺寸为5MB -->
        <property name="maxUploadSize">
            <value>5242880</value>
        </property>
    </bean>