elementUI 本身就提供了 文件上传的方法
<el-upload
class="upload-demo"
ref="upload"
name="file"
accept=""
:action="myaction"
:on-preview="handlePreview"
:before-upload="updateFileName"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-progress="handleProgress"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary"
>选取文件</el-button
>
<el-button
style="margin-left: 10px;"
size="small"
type="success"
@click="submitUpload"
>上传到服务器</el-button
>
<div slot="tip" class="el-upload__tip">
注意!上传的文件不能超过100M
</div>
</el-upload>
组件中的 action 属性就是文件上传的后端地址
后端方法:
@PostMapping("/fileUpLoad")
public String upload(MultipartFile file) throws SocketException, IOException {
// 获取文件名
String fileName = file.getOriginalFilename();
// 本工程下的路径
String path=System.getProperty("user.dir")+"\\src\\main\\resources\\static\\upload\\";
String destFileName= path + fileName;
File destFile = new File(destFileName);
// 如果没有就根据地址创建一个
if(!destFile.exists()){
destFile.getParentFile().mkdirs();
}
// 将文件移动到目的目录
file.transferTo(destFile);
return "上传成功";
}