文件上传下载简单示例

图片和视频都可以算是文件可以做统一处理。

vue组件：

<template>
  <div style="margin: 100px auto">
    <el-upload
      action="fileuPload"
      list-type="listFile"
      :http-request="uploadFile"
      :limit="1"
    >
      <el-button size="small" type="primary">选取文件</el-button>
    </el-upload>
  </div>
</template>

<script>
import { fileDownload, fileUpload } from "@/api/common";
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    uploadFile(file) {
      console.log(file);
      const formData = new FormData();
      formData.append("file", file.file);
      fileUpload(formData).then((res) => {
        console.log(res.data.fileName);
      });
    },
  },
};
</script>

api：

import request from "@/utils/request";

export function fileUpload(data) {
  return request({
    url: "/common/upload",
    method: "post",
    data,
  });
}

export function fileDownload(params) {
  return request({
    url: "/common/download",
    method: "get",
    params,
  });
}

后端接口：

import com.example.examservice.common.R;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.UUID;



@RestController
@RequestMapping("/common")
public class CommonController {

	@Value("${exam.path}")
	private String basePath;

	// 文件上传
	@PostMapping("/upload")
	public R upload(MultipartFile file) {

		// 原始文件名
		String originalFilename = file.getOriginalFilename();
		// 获取后缀
		String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
		// UUID重新生成文件，防止重复覆盖
		String fileName = UUID.randomUUID() + suffix;// xxx.jpg  xxx.mp4

		try {
			// 文件转存位置
			file.transferTo(new File(basePath + fileName));
		} catch (IOException e) {
			e.printStackTrace();
		}
		return R.ok().data("fileName", fileName);
	}

	// 文件下载
	@GetMapping("/download")
	public void download(String name, HttpServletResponse response) {
		try {
			// 输入流，读取文件内容
			FileInputStream fileInputStream = new FileInputStream(new File(basePath + name));
			// 输出流，回显文件内容
			ServletOutputStream outputStream = response.getOutputStream();

			// 获取后缀
			String suffix = name.substring(name.lastIndexOf("."));
			
			if (suffix.equals("mp4"))
				// 设置响应头，告诉浏览器这是一个mp4视频文件
				response.setContentType("video/mp4");
			else if (suffix.equals("jpg"))
				// 设置响应头，告诉浏览器这是一个jpg图片文件
				response.setContentType("image/jpeg");
			
			int len = 0;
			byte[] bytes = new byte[1024];
			while ((len = fileInputStream.read(bytes)) != -1) {
				outputStream.write(bytes, 0, len);
				outputStream.flush();
			}

			// 关闭资源
			fileInputStream.close();
			outputStream.close();

		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

流程可以概况为：

前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名

如果想要把视频回显或获取视频，那么整体流程可以看成：

前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名=>前端拿到文件名后根据文件名发送请求=>后端根据文件名从文件夹中拿到文件并返回对应文件