[Java知识库]springboot + vue 实现文件上传功能

springboot + vue 实现文件上传功能

前端文件上传演示，比如element-ui，layui，bootstrap都给我们定义好了，上传模块，我们直接拿着用就可以，

下面我们用element-ui实现文件上传的功能，上代码

这里我们只演示主要代码，至于使用element-ui开发系统，官网更详细哦

     <div class="form-group">
                  <label>上传故障图片</label>
                  <el-upload
                      class="upload-demo"
                      drag
                      action="填后端接口地址"
                      multiple>
                    <i class="http://localhost:8099/student/upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                  <p class="help-block">
                  </p>
                </div>

下面就是我们接受文件的controller接口啦，拿到传来的文件了，我们不久想怎么做就怎么做了嘛，想怎么操作它就怎么操作它

上代码

    @PostMapping("/upload")
    public Response studentUpload(HttpServletRequest request, @RequestParam("file") MultipartFile file)  throws IOException {

        Response<String> response = new Response<>();

        String fileName = file.getOriginalFilename();
        String newFileName = fileName + ".jpg";
        // 得到文件保存的位置以及新文件名
        File dest = new File(System.getProperty("user.dir")+
                "/upload_photo/student/"+ newFileName);

        try {
            // 上传的文件被保存了
            file.transferTo(dest);
            // 打印日志
            System.out.println("上传成功，当前上传的文件保存在 {}"+ newFileName);
            // 自定义返回的统一的 JSON 格式的数据，可以直接返回这个字符串也是可以的。
            response.setCode(CodeEnum.SUCCESS.getCode());
        } catch (IOException e) {
            log.error("文件上传出错");
        }


        response.setCode(CodeEnum.SUCCESS.getCode());


        return response;
    }