一、前臺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