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

一、前臺json

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

getFile: 獲取文件dom

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) }) },

二、後臺post

@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 "上傳失敗"; } }

  三、效果演示jsonp

 

 

相關文章
相關標籤/搜索