微信小程序實現(xiàn)上傳圖片功能

更新時間：2018年05月28日 11:29:38 作者：李無敵

這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

微信小程序圖片上傳，供大家參考，具體內容如下

先來看一下微信小程序的api

來看一下頁面效果

查看大圖

wxml文件代碼：

<view class="weui-cell"> 
 <view class="weui-cell__bd"> 
  <view class="weui-uploader"> 
  <view class="weui-uploader__hd"> 
  <view class="weui-uploader__title">營業(yè)執(zhí)照</view> 
  <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view> 
  </view> 
  <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> 
  </view> 
 </view> 
</view>

js文件代碼

chooseImage: function () { 
 var that = this; 
 console.log('aaaaaaaaaaaaaaaaaaaa') 
 
 wx.chooseImage({ 
 count: this.data.count[this.data.countIndex], 
 success: function (res) { 
 console.log('ssssssssssssssssssssssssss') 
 //緩存下 
 wx.showToast({ 
  title: '正在上傳...', 
  icon: 'loading', 
  mask: true, 
  duration: 2000, 
  success: function (ress) { 
  console.log('成功加載動畫'); 
  } 
 }) 
 
 console.log(res) 
 that.setData({ 
  imageList: res.tempFilePaths 
 }) 
 //獲取第一張圖片地址 
 var filep = res.tempFilePaths[0] 
 //向服務器端上傳圖片 
 // getApp().data.servsers,這是在app.js文件里定義的后端服務器地址 
 wx.uploadFile({ 
  url: getApp().data.servsers + '/weixin/wx_upload.do', 
  filePath: filep, 
  name: 'file', 
  formData: { 
  'user': 'test' 
  }, 
  success: function (res) { 
  console.log(res) 
  console.log(res.data) 
  var sss= JSON.parse(res.data) 
  var dizhi = sss.dizhi; 
  //輸出圖片地址 
  console.log(dizhi); 
  that.setData({ 
  "dizhi": dizhi 
  }) 
 
  //do something 
  }, fail: function (err) { 
  console.log(err) 
  } 
  }); 
 } 
 }) 
 }, 
 previewImage: function (e) { 
 var current = e.target.dataset.src 
 
 wx.previewImage({ 
 
 current: current, 
 urls: this.data.imageList 
 }) 
 }

java 后端代碼：

//獲取當前日期時間的string類型用于文件名防重復 
 public String dates(){ 
  Date currentTime = new Date(); 
  SimpleDateFormat formatter = new SimpleDateFormat("yyyyMMddHHmmss"); 
  String dateString = formatter.format(currentTime); 
  return dateString; 
 } 
 @RequestMapping("wx_upload.do") 
 public void uploadPicture(HttpServletRequest request, HttpServletResponse response,PrintWriter writer) throws Exception { 
 System.out.println("進入get方法！"); 
 //獲取從前臺傳過來得圖片 
 MultipartHttpServletRequest req =(MultipartHttpServletRequest)request; 
 MultipartFile multipartFile = req.getFile("file"); 
 //獲取圖片的文件類型 
 String houzhu=multipartFile.getContentType(); 
 int one = houzhu.lastIndexOf("/"); 
 System.out.println(houzhu.substring((one+1),houzhu.length())); 
 System.out.println(multipartFile.getName()); 
 //根據(jù)獲取到的文件類型截取出圖片后綴 
 String type=houzhu.substring((one+1),houzhu.length()); 
 System.out.println(multipartFile.getContentType()); 
 
 String filename; 
 // request.getRealPath獲取我們項目的根地址在加上我們要保存的地址 
 String realPath = request.getRealPath("/upload/wximg/"); 
 try { 
  File dir = new File(realPath); 
  if (!dir.exists()) { 
  dir.mkdir(); 
  } 
  //獲取到當前的日期時間用戶生成文件名防止文件名重復 
  String filedata=this.dates(); 
 //生成一個隨機數(shù)來防止文件名重復 
  int x=(int)(Math.random()*1000); 
  filename="zhongshang"+x+filedata; 
  System.out.println(x); 
 將文件的地址和生成的文件名拼在一起 
  File file = new File(realPath,filename+"."+type); 
  multipartFile.transferTo(file); 
 //將圖片在項目中的地址和isok狀態(tài)儲存為json格式返回給前臺，由于公司項目中沒有fastjson只能用這個 
  JSONObject jsonObject=new JSONObject(); 
  jsonObject.put("isok",1); 
  jsonObject.put("dizhi","/upload/wximg/"+filename+"."+type); 
 
  writer.write(jsonObject.toString()); 
 } catch (IOException e) { 
  e.printStackTrace(); 
 } catch (IllegalStateException e) { 
  e.printStackTrace(); 
 } 
}

來看一下之前在前端js輸出的內容：