ElementUI的el-upload 文件上传

喜欢ヅ旅行 2022-05-18 01:10 359阅读 0赞

今天写项目用到了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这个方法，就是一个所有事情都帮我们昨完的方法，我们只要调用这个方法，就能得到我们想要的数据