vue ----element-ui 文件上傳upload 組件 實現 及其後臺

一、前臺

action 不用改 ：https://jsonplaceholder.typicode.com/posts/

getFile: 獲取文件

data(){
  return {
   file: {},
   fileList: []
      }
     }
   <el-upload
     action="https://jsonplaceholder.typicode.com/posts/"
        :file-list="fileList"
        @on-change="handleChange"
        :http-request="getFile"
     >
 <el-button size="small" type="primary">上傳</el-button>
 </el-upload>
<el-button size="small" type="success" @click="upload">確認上傳</el-button>

　　

 getFile(item) { console.log(item.file) this.file = item.file }, upload() { const fd = new FormData() fd.append('filename', this.file) const config = { headers: { 'Content-Type': 'multipart/form-data' }} this.$request.post('/uploading', fd, config ).then(response => { this.$message.success(response.retCode) }) },

二、後臺

@ApiOperation("上傳文件")
    @PostMapping(value = "/uploading")
    public @ResponseBody
    String uploadFile(@RequestParam("filename") MultipartFile file) {
        log.info("接收到的文件數據爲：" + file);
       
        if (file.isEmpty()) {
 
            return "上傳文件爲空";

        }
        // 獲取文件全名a.py
        String fileName = file.getOriginalFilename();
        // 文件上傳路徑
        String templatePath = "E:/file/template/"
        log.info("文件路徑:" + templatePath);
        // 獲取文件的後綴名
        String suffixName = fileName.substring(fileName.lastIndexOf("."));
        //獲取文件名
        String prefixName = fileName.substring(0, fileName.lastIndexOf("."));
        // 解決中文問題,liunx 下中文路徑,圖片顯示問題
        //fileName = UUID.randomUUID() + suffixName;
        File dest0 = new File(templatePath);
        File dest = new File(dest0, prefixName + File.separator + fileName);
        //文件上傳-覆蓋
        try {
            // 檢測是否存在目錄
            if (!dest0.getParentFile().exists()) {
                dest0.getParentFile().mkdirs();
                //檢測文件是否存在
            }
            if (!dest.exists()) {
                dest.mkdirs();
            }
            file.transferTo(dest);
            return "上傳成功";
        } catch (Exception e) {
            log.error("文件上傳錯誤");
            return "上傳失敗";
        }

    }

　　三、效果演示