图片和视频都可以算是文件可以做统一处理。
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();
}
}
}
流程可以概况为:
前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名
如果想要把视频回显或获取视频,那么整体流程可以看成:
前端上传文件=>组件拿到文件后发送请求=>后端存储文件并返回文件名=>前端拿到文件名后根据文件名发送请求=>后端根据文件名从文件夹中拿到文件并返回对应文件