vue + springboot 文件服務器之文件上傳

最近想整合一下自己所做的項目，於是需要一個文件服務器來承載項目中所有文件的持久化，以及可視化。

有興趣可以瞧瞧，其中包含python，java作為后端，k8s+docker服務打包，vue作為前端： https://github.com/oneInsect/magic-box

其中 文件上傳作為核心功能，前端使用vue實現，后端使用springboot承載。

用戶頁面只支持單文件上傳，前端代碼

          <el-upload
            class="upload-demo"
            drag
            action="http://localhost:80/filemgt/files/file"
            :limit=1
            :on-success="handleSuccess"
            multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">Drag file here or click to upload<em>Click to Upload</em></div>
          </el-upload>

  　　

        handleSuccess(response, file, fileList){

            this.file.name = file.name

        },

后端先接收文件，再接收文件信息

    @PostMapping("file")
    public SelfDefineResponse addFile(@RequestParam(value = "file") MultipartFile uploadFile){
        if (uploadFile == null) {
            return SelfDefineResponse.error().message("Upload error, please choose file");
        }
        if (FileUtil.saveTmpFile(uploadFile)){
            return SelfDefineResponse.ok();
        }else{
            return SelfDefineResponse.error().message("Save tmp file failed");
        }
    }

    @PostMapping("fileinfo")
    public SelfDefineResponse addFileInfo(@RequestBody(required = true) Files files){
        boolean saved = filesService.save(files);
        String fileName = files.getName();
        String filePath = files.getPath();
        if (saved){
            Boolean fileSaved = FileUtil.saveTmpFile2server(fileName, filePath);
            if (fileSaved){
                return SelfDefineResponse.ok();
            }
        }
        return SelfDefineResponse.error();
    }

前端效果

 

 

 

 后端效果：