使用springboot和vue中实现upload上传组件

 

目录

前言

实现

后端部分

entity层

        controller层

VUE

从elementUI官网选择上传组件

method中定义函数 

---

前言

        上传组件上传的文件并非真的上传到了服务器，而是通过文件路径读取到文件后，在服务器生成一个完全复制源文件的新的文件（名字不同），上传时系统需要判断是否存在目标路径文件夹，如果不存在，需要先依次创建文件夹在进行上传。同时服务器中的文件使用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();
            },