文件上传
//System.getProperty("user.dir")获取到当前项目的根路径//文件上传的目录路径private static final String filePath=System.getProperty("user.dir")+"/files";/*** 文件上传* @param file* @return*/@PostMapping("/upload")public Result upload(MultipartFile file){//文件流的形式接受前端发送过来的文件String originalFilename = file.getOriginalFilename(); //xxx.pngif (!FileUtil.isDirectory(filePath)){//如果目录不存在需要先创建目录FileUtil.mkdir(filePath);//创建一个files目录
}//提供文件存储的完整的路径//给文件名加一个唯一的标识String fileName=System.currentTimeMillis() + "_" +originalFilename;//1234566721_xxx.pngString realPath=filePath+fileName;try{FileUtil.writeBytes(file.getBytes(),realPath);} catch (IOException e) {e.printStackTrace();throw new CustomException("500","文件上传失败");}//返回一个网络链接//http://localhost:8080/files/download/xxx.pngString url="http://localhost:8080/files/download/"+fileName;return Result.success(url);}
文件下载
/*** 文件下载*/@GetMapping("/download/{fileName}")public void download(@PathVariable String fileName, HttpServletResponse response){try {//response设置统一的文件名称，设置成utf-8编码response.addHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName, StandardCharsets.UTF_8));response.setContentType("application/octet-stream");OutputStream os = response.getOutputStream();String realPath=filePath+fileName;//完整的文件路径//获取到文件的字节数组byte[] bytes=FileUtil.readBytes(realPath);os.write(bytes);os.flush();os.close();} catch (IOException e) {e.printStackTrace();throw new CustomException("500","文件下载失败");}}
//response设置统一的文件名称，设置成utf-8编码response.addHeader("Content-Disposition","attachment;filename="+ URLEncoder.encode(fileName, StandardCharsets.UTF_8));response.setContentType("application/octet-stream");
前端对接文件上传下载
upload组件
<el-form-item label="头像"><div style="width: 100%;display: flex;justify-content: center;margin-bottom: 20px"><el-uploadclass="avatar-uploader"action="http://localhost:8080/files/upload":show-file-list="false":on-success="handleAvatarSuccess"><img v-if="data.form.avatar" :src="data.form.avatar" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></div></el-form-item>
回调函数
const handleAvatarSuccess = (res) => {console.log(res.data)data.form.avatar=res.data
}
表格里面显示图片
<el-table-column label="照片"><template #default="scope"><img v-if="scope.row.avatar" :src="scope.row.avatar" alt="" style="width: 40px;height: 40px" /></template></el-table-column>
上传头像表单
<el-form-item label="照片"><el-uploadclass="avatar-uploader"action="http://localhost:8080/files/upload"list-type="picture":on-success="handleAvatarSuccess"><el-button type="primary">上传头像</el-button></el-upload></el-form-item>
const handleAvatarSuccess = (res) => {console.log(res.data)data.form.avatar=res.data
}
