目录
前言
上传组件上传的文件并非真的上传到了服务器,而是通过文件路径读取到文件后,在服务器生成一个完全复制源文件的新的文件(名字不同),上传时系统需要判断是否存在目标路径文件夹,如果不存在,需要先依次创建文件夹在进行上传。同时服务器中的文件使用UUID进行命名来避免重名问题。
实现
后端部分
使用注解来简化代码
entity层
@Builder
@Data
public class MyFile() {
private String filename;
private String url;
private String originalName;
private String type; // 记录文件类型
private String size;
private String status;
private String message;
}
controller层
@RestController
@RequestMapping("/mine")
public class fileUpload() {
@PostMapping("/upload")
public String upload(MultipartFile file, HttpServletRequest request) {
// 判断文件是否为空
if(!file.isEmpty()) {
// 文件上传根路径,根据需要换成你想要的位置
String uploadPath = "C:\Users\Neptune\Desktop\project\uploadPath\upload";
File uploadDir = new File(uploadPath);
// 如果上传目录不存在,需要先创建目录
if(!uploadDir.exists()) {
uploadDir.mkdir();
}
// 获取原文件名称
String originalFilename = file.getOriginalFilename();
// 获取文件大小,单位为字节byte
String fileSize = file.getSize();
//获取URL全路径
String tmpUrl = request.getRequestURL();
//获取URL的去host(域名或IP)的部分路径
String tmpUri = request.getRequestURI();
// 获取 URL 前缀
String urlPrefix = String.valueOf(tmpUrl.substring(0, tmpUrl.length() - tmpUri.length()));
// 获取文件类型
String suffixName = originalFilename.substring(OriginalFilename.lastIndexOf("."));
// 使用 UUID 生成随机新名称
String fileName = UUID.randomUUID().toString() + suffixName;
File newFile = new File(uploadPath + "/" + fileName);
//ObjectMapper为Jackson主要类,通过该类将各个形式的信息和json格式相互转换
ObjectMapper objectMapper = new ObjectMapper();
try {
// 远程文件保存本地
file.transferTo(newFile);
MyFile myFile= new MyFile();
myFile.setSize(fileSize);
myFile.setOriginalName(originalFilename);
myFile.setFilename(fileName);
myFile.setUrl(urlPrefix + "/" + fileName);
myFile.setType(suffixName);
myFile.setStatus("SUCCESS");
myFile.setMessage(originalFilename + " 上传成功!");
String res = objectMapper.writeValueAsString(myFile); // 将对象转换为 Json 格式进行返回
return res;
} catch (IOException e) {
e.printStackTrace();
MyFile myFile= new myFile();
myFile.setStatus("FAILED");
myFile.setMessage((originalFilename + " 上传失败!");
}
} else {
ObjectMapper objectMapper = new ObjectMapper();
myFilemyFile= new myFile();
myFile.setStatus("FAILED");
myFile.setMessage((originalFilename + " 是空文件!");
}
}
}
VUE
从elementUI官网选择上传组件
<el-upload
class="upload-demo"
drag
action="/uploadDemo/mine/upload"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
name="file"
:show-file-list="false"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
method中定义函数
handleUploadSuccess(res) {
this.$message.success('上传成功');
console.log("上传成功,数据如下:");
console.log(res);
},
handleUploadError() {
this.$message.error('上传失败');
this.loading.close();
},