SpringBoot+Vue中实现文件上传(图片)
1、导入依赖
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.7.3</version>
</dependency>
2、编写Controller上传接口
@Value("${server.port}")
private String port;
private static final String ip="http://localhost";
/**
* 上传接口
* @param file
* @return editor/upload
* @throws IOException
*/
@PostMapping("/upload")
public Result<?> upload(MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename(); // 获取源文件的名称
// 定义文件的唯一标识(前缀)
String flag = IdUtil.fastSimpleUUID();
String rootFilePath = System.getProperty("user.dir") + "/files/" + flag + "_" + originalFilename; // 获取上传的路径
FileUtil.writeBytes(file.getBytes(), rootFilePath); // 把文件写入到上传的路径
return Result.success(ip + ":" + port + "/files/" + flag); // 返回结果 url
//return Result.success();
}
3、编写Controller下载接口
/**
* 下载接口
* @param flag
* @param response
*/
@GetMapping("/{flag}")
public void getFiles(@PathVariable String flag,HttpServletResponse response) {
OutputStream os; // 新建一个输出流对象
String basePath = System.getProperty("user.dir") + "/files/"; // 定于文件上传的根路径
List<String> fileNames = FileUtil.listFileNames(basePath); // 获取所有的文件名称
String fileName = fileNames.stream().filter(name -> name.contains(flag)).findAny().orElse(""); // 找到跟参数一致的文件
try {
if (StrUtil.isNotEmpty(fileName)) {
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
response.setContentType("application/octet-stream");
byte[] bytes = FileUtil.readBytes(basePath + fileName); // 通过文件的路径读取文件字节流
os = response.getOutputStream(); // 通过输出流返回文件
os.write(bytes);
os.flush();
os.close();
}
} catch (Exception e) {
System.out.println("文件下载失败");
}
}
4、在vue界面中显示
1)、上传
<el-form-item label="封面" >
<el-upload ref="upload" action="http://localhost:6060/singer/upload" :on-success="filesUploadSuccess">
<el-button type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
2)、上传成功后清除显示的文件
methods: {
filesUploadSuccess(res){
console.log(res);
this.form.pic=res.pic;
},
add(){
this.dialogVisible=true;
this.form={};
if(this.$refs['upload']){
this.$refs['upload'].clearFiles();//清空历史文件列表
}
}
}
3)、显示
<el-table-column label="封面">
<template #default="scope">
<el-image
style="width: 100px;height: 100px"
:src="scope.row.pic"
:preview-src-list="[scope.row.pic]">
</el-image>
</template>
</el-table-column >