ElementUI的el-upload

今天写项目用到了el-upload，整个控件功能很强大。
我的需求，前端点击上传，径图片保存到指定的文件夹，然后，获得保存后的路径返回给前端，赋值给user.image，之后再将完整的user对象插入数据库。
因为代码封装好了action就是请求路径，我们无法再象往常一样去，发送一个ajax请求，之后返回数据。于是问题出现了，如何获得我保存后的图片的路径呢？
其实el-upload已经给我们封装好了，其实早就该想到，既然请求路劲都封装了，那么他肯定也有封装好的得到后台返回的数据的方法。

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

以上这两个方法，都有3个参数

  uploadError:function (response, file, fileList)

其中response就是我们后台返回的数据。
html代码：

<el-upload
                               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"
                            >

  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"}
}

controller

 @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 "";
    }

其实越来越能体会到控件就是一个类的思想了，例如该控件的action，就是我们类中的一个属性，至于on-success这个方法，就是一个所有事情都帮我们昨完的方法，我们只要调用这个方法，就能得到我们想要的数据

猜你喜欢