因?yàn)楣具€在使用老版本的layui，文件上傳在新版本中全部重寫了，這里記錄下老版本layui的文件上傳。

前端代碼：（引入layui相關(guān)包）

<input type="file" lay-type="file" id="xxxxx" name="file" class="layui-upload-file">

這里可以參考layui官方文檔，有一點(diǎn)需要注意，name屬性是必需的，當(dāng)你選擇好文件后，name屬性的值，會(huì)在后臺(tái)被相應(yīng)的參數(shù)接收。

如果你只寫了上面的代碼，會(huì)發(fā)現(xiàn)文件上傳的按鈕消失了。這很正常，因?yàn)榭蚣芫褪沁@么設(shè)計(jì)的。

layui.upload({
  url: '/pay_channel/upload'
  ,before: function(input){
   //返回的參數(shù)item，即為當(dāng)前的input DOM對(duì)象
   $(input).after('<input type="hidden" name="mchId-file" value="11111"/>');
   //layer.msg('文件上傳中',{zIndex:20180509});
  }
  ,success: function(res){
  if(res.code == 'success'){
   layer.msg(res.message,{zIndex:20180510});
   certLocalPath = res.filePath
  }else{
   layer.msg(res.message,{zIndex:20180510});
  }
  }

});

url是請(qǐng)求地址，必須是AJAX請(qǐng)求（POST），必須返回JSON，返回的數(shù)據(jù)在success中操作，以上代碼簡(jiǎn)單易懂，不用照抄。

before是指在上傳請(qǐng)求進(jìn)行之前，進(jìn)行的一些操作，$(input).after('<input type="hidden" name="mchId-file" value="'+mchIdxx+'"/>');這段代碼是為了追加一個(gè)參數(shù)，參數(shù)名字位mchId-file，值為11111，所以后端接收會(huì)有兩個(gè)參數(shù)，file和mchId-file。

后端代碼：

  @RequestMapping("/upload")
  @ResponseBody
  public String importFile(MultipartFile file, HttpServletRequest request) {
   JSONObject object = new JSONObject();
      try {
       String mchId = request.getParameter("mchId-file");
       String originalFilename = file.getOriginalFilename();
//       String dirPath = System.getProperty("user.dir")+"/wx";
//       String dirPath = this.getClass().getClassLoader().getResource("").getPath()+"wx";
       String dirPath = "/xxxx/java/pay/wx/cert";
       _log.info("證書上傳的文件目錄{}", dirPath);
       String filePath = "/"+mchId+"_"+originalFilename;
  boolean b = new File(dirPath).mkdirs();
  file.transferTo(new File(dirPath + filePath).getAbsoluteFile());
  
  object.put("filePath", filePath);
  object.put("code", "success");
  object.put("message", "文件上傳成功");
  } catch (IOException e) {
  e.printStackTrace();
  object.put("code", "fail");
  object.put("message", "文件上傳失敗");
  }
      return object.toJSONString();

  }

獲得的file是MultipartFile類對(duì)象，org.springframework.web.multipart.MultipartFile

該對(duì)象可以獲取文件名字getOriginalFilename，獲取文件流getInputStream，傳輸?shù)搅硪粋€(gè)文件的方法transferTo等。

以上后端方法是將獲取到的文件，保存到另一個(gè)特別目錄中去。

再說幾句題外話：

String dirPath = System.getProperty("user.dir");//獲取項(xiàng)目地址根目錄，就是說你workspace中，該項(xiàng)目初始目錄。

String dirPath = this.getClass().getClassLoader().getResource("").getPath();//獲取項(xiàng)目resource目錄位置，即springboot中application.yml所在文件夾。

再windows中其實(shí)不需要寫盤符來表示這個(gè)目錄的絕對(duì)路徑，String dirPath = "/xxxx/java/pay/wx/cert";如果你項(xiàng)目在D盤，那絕對(duì)路徑就會(huì)變成D:/xxxx/java/pay/wx/cert,這樣就避免了服務(wù)器windows與linux的問題。

但有一點(diǎn)要注意：File file = new File(dirPath + filePath).getAbsoluteFile()，如果使用/開頭，需要用getAbsoluteFile()獲取到D:/xxxx/java/pay/wx/cert路徑的文件對(duì)象。

以上這篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論