上传图片前端vue代码:
<el-upload
class="upload-demo"
:action="uploadUrl"
:headers="headers"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="(res,file)=>{uploadSuccess(scope.row,res,file)}"
v-show="!scope.row.isShow">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
后端代码:
controller:
//上传图片
@PostMapping("uploadFile")
public Result uploadFile(MultipartFile file, HttpServletRequest request) throws IllegalStateException, IOException {
// TODO: 文件保存文件夹,后期可以换成配置文件中的内容
String path = "F:\\myapp\\file";
// 调用fileService保存文件
return invoiceService.storeFile(file, path);
}
service:
public Result storeFile(MultipartFile file, String path) {
List<String> paths=new ArrayList<>();
if(!StringUtil.isEmpty(file)){
// 获取原始文件名
String fileName = file.getOriginalFilename();
// // 获取文件后缀
// String suffixName = fileName.contains(".") ? fileName.substring(fileName.lastIndexOf(".")) : null;
// //文件的保存重新按照时间戳命名
// String newFileName = System.currentTimeMillis() + suffixName;
// 最终保存的文件
File filePath = new File(path + File.separator + fileName);
// 判断文件夹是否存在
if (!filePath.getParentFile().exists()) {
filePath.getParentFile().mkdirs();
}
// 保存文件
try {
file.transferTo(filePath);
} catch (IOException e) {
e.printStackTrace();
}
paths.add(filePath.toString());
// 如果成功,会返回文件的绝对路径,方便下载
}
String uploadPath=null;
if(paths.size()>0){
uploadPath= String.join(",", paths);
}
return Result.ok(null).setData(uploadPath);
}