1.在微信小程序上，實(shí)現(xiàn)多圖片的上傳在wxml文件中實(shí)現(xiàn)頁(yè)面布局。

<view style="width:100%;float:left;margin-top:25rpx;margin-left:40rpx;padding-bottom:120rpx;" class="weui-uploader__bd">        <view class="weui-uploader__files">
              <block wx:for="{{pics}}" wx:for-item="image" wx:key="item">
               <view class="weui-uploader__file">
                 <image src="../../../images/warehouse/scanCode_delete.png" wx:if="{{image!=''}}"
                 bindtap="img_delete" class="image_view_css" data-index="{{index}}" 
                 data-sign="{{disabl}}"></image>
                 <image class="weui-uploader__img" wx:if="{{image!=''}}" src="{{filters.updateImag(httpURL,deURL,image)}}" bindtap="previewImage"></image>  
               </view>
              </block>
            </view>
            <view class="weui-uploader__input-box {{isShow?'true':'hideTrue'}}">              <view class="weui-uploader__input" bindtap="chooseImage" data-sign="{{disabl}}"></view>
            </view>
</view>

2.這里頁(yè)面樣式的布局實(shí)現(xiàn)。

.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.weui-uploader__file {  float: left;
  margin-right: 15px;
  margin-bottom: 9px;
}
.image_view_css{  width:60rpx;
  height: 60rpx;
  position: absolute;
  z-index: 5;
  margin-left: 65px;
  margin-top: -25rpx
}
.weui-uploader__img {  display: block;
  width: 79px;
  height: 79px;
}
.weui-uploader__input-box {  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.weui-uploader__input-box:before {  width: 2px;
  height: 39.5px;
}
.weui-uploader__input-box:after {  width: 39.5px;
  height: 2px;
}
.weui-uploader__input {  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.hideTrue {  display: none
}

3.在js層的實(shí)現(xiàn)中在在data變量中先定義好
pics: [],
count: [1, 2, 3],
isShow:true,
變量
1）onload的方法中首先要加載

isShow: (options.isShow == "true" ? true : false)

2）頁(yè)面布局形成的為：

3)在實(shí)現(xiàn)圖片的選擇上傳中點(diǎn)擊空白的頁(yè)面增加圖片調(diào)用執(zhí)行方法

在 圖片的上傳后success成功返回值中在開(kāi)發(fā)工具上是以http://開(kāi)頭返回圖片文路徑，手機(jī)上返回的是wxfile:// 開(kāi)頭的


4)而實(shí)現(xiàn)圖片的預(yù)覽調(diào)用的方法是：

  previewImage: function (e) {    var current = e.target.dataset.src
    wx.previewImage({      current: current,      urls: this.data.pics
    })
  },

5. 實(shí)現(xiàn)將圖片上傳到后臺(tái)的服務(wù)器上，在js中調(diào)用的方法
   //對(duì)保存了圖片數(shù)組pics做一個(gè)for循環(huán)。

 wx.uploadFile({              url: url + "/WxController/upload",              filePath: pics[0], //這里微信的調(diào)用方法只能每次上傳一張圖片所以可以再調(diào)用方法前做對(duì)數(shù)組pics的一個(gè)迭代循環(huán)。
              name: 'file',              formData: {                coNo: app.globalData.staff.coNo,                lastFolder: 'ProdPaperWx'
              },              dataType: 'json',              success: function (res) {                if (res.statusCode == 200) {					console.log("成功返回值：",res)
				}
			  }
	})		

后臺(tái)接口方法/WxController/upload 用java執(zhí)行

 public Map<String,Object> upload(HttpServletRequest request, @RequestParam(value = "file", required = false) MultipartFile file) throws IOException {        Map<String,Object> map=new HashMap<String, Object>();        String msg="",ret="success",path="",type=null;
        request.setCharacterEncoding("UTF-8");        String coNo=request.getParameter("coNo");        String lastFolder =request.getParameter("lastFolder");        if(!file.isEmpty()){            String fileName = file.getOriginalFilename();
            type = fileName.indexOf(".") != -1 ? fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length()) : null;            if(type!=null){                if("PNG".equals(type.toUpperCase())||"JPG".equals(type.toUpperCase())) {                    // 項(xiàng)目在容器中實(shí)際發(fā)布運(yùn)行的根路徑
                 String realPath=BaseController.getCustFilePath()+"image/"+coNo+ "/" + lastFolder + "/";            //這圖片存放的路徑采用了在指定的方式，在BaseController的getCustFilePath()方法中指定好了  
                 File myFilePath = new File(realPath);              if (!myFilePath.exists()){//文件夾不存在，生成一個(gè)文件夾
               myFilePath.mkdirs();
              }                    // 自定義的文件名稱(chēng)
                    String trueFileName=coNo+String.valueOf(System.currentTimeMillis())+"."+type;                    // 設(shè)置存放圖片文件的路徑
                    path=realPath+trueFileName;
                    file.transferTo(new File(path));ret="success";msg="";
                }else {
                 msg="不是我們想要的文件類(lèi)型,請(qǐng)按要求重新上傳!";ret="error";path="";
                }
            }else{
                msg="文件類(lèi)型為空!";ret="error";path="";
            }
        }else {
            msg="沒(méi)有找到相對(duì)應(yīng)的文件!";ret="error";path="";
        }
        map.put("ret",ret);
        map.put("msg",msg);
        map.put("path",path);        return map;
    }

這里是BaseController類(lèi)內(nèi)的一個(gè)指定圖片存放路徑的方法。

public class BaseController {	//客戶(hù)文件存放路徑
		public static String getCustFilePath(){			return "D:/lqb/imge/";
			}
}