目錄
1.后端代碼部分：
2.前端代碼部分
3.效果展示
1.后端代碼部分：
@RestController
@RequestMapping("/file")
public class FileController {
private final String UPLOAD_PATH = "D:/OBS/";//這里寫上你需要上傳的路徑（模擬服務(wù)器）
@PostMapping("/upload")
public ResponseEntity<String> uploadFile(@RequestParam MultipartFile file) {
// ... File upload logic ...
if (file.isEmpty()) {
return new ResponseEntity<>("文件不能為空", HttpStatus.BAD_REQUEST);
}
try {
byte[] bytes = file.getBytes();
Path path = Paths.get(UPLOAD_PATH + File.separator + file.getOriginalFilename());
Files.write(path, bytes);
return new ResponseEntity<>("文件上傳成功", HttpStatus.OK);
} catch (IOException e) {
e.printStackTrace();
return new ResponseEntity<>("文件上傳失敗", HttpStatus.INTERNAL_SERVER_ERROR);
}
}
}2.前端代碼部分
<template>
<div>
<el-upload
drag
action="http://localhost:8081/file/upload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">拖拽文件到此處上傳</div>
</el-upload>
</div>
</template>
<script>
export default {
methods: {
handleUploadSuccess(response, file) {
this.$message.success('文件上傳成功');
},
handleUploadError(err, file) {
this.$message.error('文件上傳失敗');
}
}
};
</script>3.效果展示
?
?
文章來源：http://www.zghlxwxcb.cn/news/detail-531200.html
?
文章來源地址http://www.zghlxwxcb.cn/news/detail-531200.html
到了這里，關(guān)于SpringBoot+Vue實(shí)現(xiàn)文件上傳功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
