ElementUIのel-uploadファイルアップロード

今日はプロジェクトを書くのにel-uploadを使いました.コントロール全体の機能が強いです.私の需要、フロントエンドはアップロードをクリックして、径のピクチャーは指定したフォルダに保存して、それから、保存した経路を得てフロントエンドに戻って、user.imageに値をつけて、それから完全なuserオブジェクトをデータベースに挿入します.コードがカプセル化されてactionがリクエストパスであるため、私たちはいつものようにajaxリクエストを送信し、データを返すことはできません.そこで問題が発生しました.どうやって私が保存した画像のパスを手に入れますか?実はel-uploadはすでに私たちにカプセル化してくれたが、実はとっくに考えていたはずだ.道力をカプセル化してほしい以上、バックグラウンドから戻ってきたデータをカプセル化する方法もあるに違いない.

 :on-error="uploadError"
 :on-success="uploadSuccess"

以上の2つの方法には,いずれも3つのパラメータがある.

  uploadError:function (response, file, fileList) 

ここでresponseはバックグラウンドで返されるデータです.htmlコード:

class="upload-demo"
                               ref="upload"
                               :action="api.addImg"
                               :auto-upload="false"
                               list-type="picture"
                               :file-list="fileList"
                               :on-error="uploadError"
                               :on-success="uploadSuccess"
                               :limit="1"
                            >

js

  submitUpload:function () {
           this.$refs.upload.submit();
        },
        uploadSuccess:function(response, file, fileList) {
            console.log("      response" +response);
            console.log("      file" +file);
            console.log("      fileList" +fileList);
            // response：         ，            
            app.user.userImage=response;
        },
        uploadError:function (response, file, fileList) {

            console.log("      response" +response);
            console.log("      file" +file);
            console.log("      fileList" +fileList);
        }

リクエストパス

data:{
    api:{addImg:Config.apiBaseUrl+"user/addImg.do"}
}

制御装置

 @RequestMapping("/user/addImg.do")
    @ResponseBody
    public String addImg(@RequestBody MultipartFile file, HttpServletRequest request, HttpServletResponse response)throws Exception{
        System.out.println("        ："+file.isEmpty());
        if(file != null){
            String path =null;//     
            String imgType=null;//    
            String  fileName = file.getOriginalFilename();//      
            //       
            imgType=fileName.indexOf(".")!=-1?fileName.substring(fileName.lastIndexOf(".")+1, fileName.length()):null;
            if(imgType!=null){
                if("GIF".equals(imgType.toUpperCase()) || "PNG".equals(imgType.toUpperCase()) || "JPG".equals(imgType.toUpperCase())){
                    //                 
                   /* String realPath = request.getSession().getServletContext().getRealPath("/");*/
                    String realPath = "E:\\Exercise\\workspace1\\pt\\pt-web\\src\\main\\webapp\\admin\\sys\\libs\\images\\";
                    //         
                    String trueFileName=String.valueOf(System.currentTimeMillis())+fileName;
                    //          
                    path=realPath+trueFileName;
                    System.out.println("        "+path);
                    //          
                    file.transferTo(new File(path)); //        
                    System.out.println("            ");
                }else{
                    System.out.println("   GIF、PNG  JPG     ");
                }
            }else{
                System.out.println("      ");
            }
            return path;
        }else{
            System.out.println("          ");
        }
        System.out.println("         :"+file.getOriginalFilename());

      return "";
    }

実はますますコントロールが1つのクラスの思想であることを体得することができて、例えばこのコントロールのaction、私达のクラスの中の1つの属性で、on-successのこの方法について、1つのすべての事はすべて私达の昨日完成した方法を手伝って、私达はこの方法を呼び出すだけで、私达の望むデータを得ることができます