利用layui的load模塊解決圖片上傳

首先肯定要參考layui官網的upload模塊文檔：http://www.layui.com/doc/modules/upload.html

講講思路：在一份添加表單中，我們有個圖片上傳的模塊，然后我們關於圖片上傳的邏輯是分兩步的：點擊submit，然后觸發圖片上事件，圖片上傳到服務器的指定文件夾中，名字是JavaScript中生成的uuid加上文件本來的后綴名。   然后隨着表單一起送到后台，並去到dao層的是這個圖片名稱的uuid和后綴名（后綴名其實並沒有上傳而是在后台另外通過file對象獲取）

 

現在直接上項目中的前端代碼：

<div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">特征圖譜或指紋圖譜：</label>
                <div class="layui-input-block">
                    <input type="text" name="medicinalFeatureImgPath" id="medicinalFeatureImgPath" autocomplete="off"
                        placeholder="" class="layui-input layui-inline" disabled>
                    <input type="hidden" name="bMedicinalFeatureImgPath" id="bMedicinalFeatureImgPath">
                    <button type="button" class="layui-btn layui-inline" id="btnBMedicinalFeatureImg">上傳圖片</button>
                    <button type="button" style="display: none;"
                        class="layui-btn layui-inline" id="btnUpBMedicinalFeatureImg"></button>
                </div>
                <div style="display: none;" class="layui-upload layui-input-block">
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="BMedicinalFeatureImgFile">
                    </div>
                </div>
</div>

其中這個#medicinalFeatureImgPath是你選完圖片后給用戶看的圖片，而這個#bMedicinalFeatureImgPath是隱藏的，里面裝的是JavaScript產生的uuid，然后傳到服務器上的。

 

在頁面中的效果：

 

 

 

然后我們在JavaScript中把layui的upload上傳的一些配置給封裝成一個函數：

/**
 * 圖片上傳圖片
 * @param btnImg為點擊button選擇圖片
 * @param btnUpImg 為指向一個按鈕觸發上傳
 * @param mImgPath 圖片名稱，上傳至數據庫
 * @param imgPath 圖片名稱 顯示在頁面上的
 * @param medicinalimg 圖片上傳的路徑  就是controller里面的那個請求方法攔截的那個
 * @param upload 圖片上傳服務
 */ 
function uploadiImage(btnImg,btnUpImg,mImgPath,imgPath,medicinalimg,upload){
      
    var imgname = uuid();//生成一個獨一無二的字符串然后存在數據庫中
    
    var uploadInsts = upload.render({
      elem: '#'+btnImg//框架內容，選擇 上傳的那個按鈕 就告訴這個模塊哪個點擊哪個按鈕發起這個上傳文件的操作
      ,url: productBase.baseUrl+'/'+medicinalimg    //根據你controller里的自己設
      ,accept: 'images'
      ,size:20000                 
      ,auto: false //選擇文件后不自動上傳
      ,bindAction: '#'+btnUpImg //指向一個按鈕觸發上傳  這個跟上面那個配合使用，不自動上傳就要選一個上傳的按鈕
      ,data: {imgname: imgname   //就只傳個uuid過去，而這個uuid就是存在數據庫中的文件名，所以到了后台還要用文件的屬性來獲取圖片的后綴名
          } //可選項。額外的參數，如：
    ,choose: function(obj){
        //預讀本地文件示例，不支持ie8
        obj.preview(function(index, file,result){  
        var  namehous=file.name.substring(file.name.lastIndexOf("."),file.name.length);

          $('#'+mImgPath).val(imgname+namehous);//圖片名稱，上傳至數據庫
          $('#'+imgPath).val(file.name);//圖片名稱,僅僅是在edit界面顯示的名稱
        });
      }                    
      ,done: function(res){
        //如果上傳失敗
        if(res.code > 0){
        }
        //上傳成功
      }
      ,error: function(){
       
      }
    });
}

 

然后是調用這個模塊的代碼：

先是引入模塊：

layui.use(['form', 'layedit', 'upload', 'laydate'], function () {
    
    productBase.init();
    hideShowInfo();
    var layerTips = parent.layer === undefined ? layui.layer : parent.layer, //獲取父窗口的layer對象
        layer = layui.layer, //獲取當前窗口的layer對象
        form = layui.form,
        upload = layui.upload, //獲取upload模塊
        layedit = layui.layedit;  
  //  var forms = layui.form;

 

關鍵代碼就那個upload，其他請無視……

然后調用函數把參數穿進去：

uploadiImage('btnBMedicinalFeatureImg','btnUpBMedicinalFeatureImg','bMedicinalFeatureImgPath','medicinalFeatureImgPath','productBasebMedicinalFeatureImg',upload);

 

然后后台的代碼

 

controller:

@ApiOperation(value="葯材質量監測中的特征圖譜照片上傳", notes="葯材質量監測中的特征圖譜照片上傳")
    @PostMapping("/productBasebMedicinalFeatureImg")
    public Map<String, Object> upLoadbMedicinalFeatureImg(MultipartFile file,HttpServletRequest 
            request,@RequestParam Map<String, Object> map) {
        //String name = file.getOriginalFilename();        
        //String suffixName = name.substring(name.lastIndexOf("."));
        return productBaseService.saveMedicinalFeatureImg(file,request,map);
}

在controller中我們用spring的MultipartFile來接收傳上來的文件（這個requset是沒用用的，忘記刪了），map里面裝的是圖片的uuid名字

 

看serviceImpl：

@Override
    public Map<String, Object> saveMedicinalFeatureImg(MultipartFile file, HttpServletRequest request,
            Map<String, Object> map) {
        // TODO Auto-generated method stub

        Map<String, Object> maps = new HashMap<String, Object>();

        try {
            // 判斷是否擁有路徑，沒有就新建
            String path = Constant.IMG_PATH_FILE;
            if (!new File(path).exists()) {
                new File(path).mkdirs();
            }
            /** 將圖片文件保存到服務器，同時返回變成后圖片的名字 */
            String image = uploadMedicinalFeatrureFile(file, path, map);

            maps.put("code", 0);
        } catch (Exception e) {
            maps.put("code", 1);
            e.printStackTrace();
        }
        return maps;//map返回就是代表一個狀態而已

    }

 

關鍵是調用這個uploadMedicinalFeatureFile(file,path,map)

public static String uploadMedicinalFeatrureFile(MultipartFile file,String path,Map<String, Object> map) throws IOException{
        String name = file.getOriginalFilename();
        String suffixName = name.substring(name.lastIndexOf("."));
        
        String medicinalFeatureUuid = (String)map.get("imgname");
        String fileName = medicinalFeatureUuid+suffixName;
        
        File tempFile = new File(path,fileName);
        if(!tempFile.getParentFile().exists()){
            tempFile.getParentFile().mkdir();
        }
        if(tempFile.exists()){
            tempFile.delete();
        }
        tempFile.createNewFile();
        file.transferTo(tempFile);
        return tempFile.getName();
}

 

然后存到數據庫的話，只要那個uuid名和表單其他信息一起上傳然后走常規的流程就可以了。

所以在表單觸發submit的同時要同時觸發文件的上傳！