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
})
},實(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/";
}
}