javascript
<div style="display: flex; justify-content: center; align-items: center; height: 60vh; margin-top: 10vh;">
<video ref="videoPlayer" controls style="width: auto; height: 100%;"></video>
</div>
</template>
<script>
export default {
name: 'viewFDDetails',
props: {
tableData: {},
id:String
},
data() {
return {};
},
mounted() {},
computed: {
},
methods: {
viewVideo(row,type){
console.log("row=",row);
console.log("totalBatch=",row.totalBatch,"idNumber",row.idNumber,"batchName=",row.batchName);
let videoName = row.batchName+"_"+row.idNumber+"_"+type;
let videoUrl = row.totalBatch+"/"+videoName+".mp4";
//视频地址先写这，后期改到配置里
let url = "http://192.168.16.119:9001/images/"+videoUrl;
console.log("videoUrl=",videoUrl)
sessionStorage.setItem("videoUrl",'http://192.168.16.119:9001/images/1765267861926932482/20_511681200012212819_2.mp4');
window.open("viewvideo","_blank");
},
//流方法播放视频
playVideo(row, type) {
console.log("进入playVideo");
console.log("row=", row);
console.log("totalBatch=", row.totalBatch, "idNumber", row.idNumber, "batchName=", row.batchName);
let videoName = row.batchName + "_" + row.idNumber + "_" + type;
let videoUrl = row.totalBatch + "/" + videoName + ".mp4";
this.loadVideo("6666666","1_4865466371306164225_2.mp4");
},
loadVideo(videoPath,videoName) {
const videoPlayer = this.$refs.videoPlayer;
fetch(`http://127.0.0.1:8080/ftp/getVideo?videoPath=${encodeURIComponent(videoPath)}&videoName=${encodeURIComponent(videoName)}`)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.blob();
})
.then(blob => {
const videoBlob = new Blob([blob], { type: 'video/mp4' });
const videoURL = URL.createObjectURL(videoBlob);
videoPlayer.src = videoURL;
videoPlayer.play();
})
.catch(error => {
console.error('There was a problem with your fetch operation:', error);
});
}
},顺便带后端代码
@CrossOrigin(origins = "*") // 允许任何来源的请求
@GetMapping("/ftp/getVideo")
public void getVideo(HttpServletResponse response, @RequestParam String videoPath, @RequestParam String videoName) {
FTPClient ftp = new FTPClient();
ftp.setControlEncoding("UTF-8");
try {
ftp.connect(FTPProperties.getServer(), FTPProperties.getPort());
ftp.login(FTPProperties.getUsername(), FTPProperties.getPassword());
int reply = ftp.getReplyCode();
if (!FTPReply.isPositiveCompletion(reply)) {
ftp.disconnect();
throw new RuntimeException("FTP server refused connection.");
}
ftp.setFileType(FTPClient.BINARY_FILE_TYPE);
InputStream inputStream = ftp.retrieveFileStream(videoPath + "/" + videoName);
if (inputStream != null) {
try (OutputStream outputStream = response.getOutputStream()) {
byte[] buffer = new byte[4096];
int bytesRead;
while ((bytesRead = inputStream.read(buffer)) != -1) {
outputStream.write(buffer, 0, bytesRead);
}
outputStream.flush(); // 确保所有数据已写入输出流
}
// 关闭输出流
response.flushBuffer();
inputStream.close();
ftp.logout(); // 登出
} else {
throw new RuntimeException("文件未找到");
}
} catch (IOException e) {
// throw new RuntimeException("Error downloading file from FTP server", e);
} finally {
if (ftp.isConnected()) {
try {
ftp.disconnect();
} catch (IOException e) {
// log error or handle as needed
}
}
}
}
@CrossOrigin(origins = "*") // 允许任何来源的请求
@GetMapping("/ftp/getVideoList")
public List<VideoInfo> getVideoList() {
List<VideoInfo> videoList = new ArrayList<>();
// 连接FTP服务器
FTPClient ftp = new FTPClient();
ftp.setControlEncoding("UTF-8");
try {
int reply;
ftp.connect(FTPProperties.getServer(), FTPProperties.getPort());
ftp.login(FTPProperties.getUsername(), FTPProperties.getPassword());
reply = ftp.getReplyCode();
if (!FTPReply.isPositiveCompletion(reply)) {
ftp.disconnect();
}
FTPFile[] files = ftp.listFiles(); // 获取FTP服务器上所有文件
for (FTPFile file : files) {
listFilesRecursive(ftp, "/home/ftpuser", videoList);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
try {
ftp.logout();
ftp.disconnect();
} catch (IOException e) {
e.printStackTrace();
}
}
return videoList;
}
private void listFilesRecursive(FTPClient ftp, String path, List<VideoInfo> videoList) throws IOException {
FTPFile[] files = ftp.listFiles(path);
for (FTPFile file : files) {
if (file.isDirectory()) {
// 如果是文件夹，递归进入文件夹
listFilesRecursive(ftp, path + "/"+ file.getName() , videoList);
} else if (file.getName().toLowerCase().endsWith(".mp4")) {
// 处理视频文件
String videoPath = path ; // 视频文件路径
String videoName = file.getName(); // 视频文件名称
videoList.add(new VideoInfo(videoPath, videoName));
}
}
}
//利用ftp技术，将文件上传到ftp服务器
@CrossOrigin(origins = "*") // 允许任何来源的请求
@PostMapping("/uploadFileToFTP")
//ftp 上传方法
public boolean uploadFile(@RequestParam("file") MultipartFile file,@RequestParam("batchId") String batchId) throws IOException {
boolean flag = uploadFile(FTPProperties.getServer(),FTPProperties.getPort(),FTPProperties.getUsername(),
FTPProperties.getPassword(),batchId,"video",file.getOriginalFilename(),file.getInputStream());
//根据反馈输出日志
if (flag){
log.info("上传成功,文件名为："+file.getOriginalFilename()+"文件大小="+file.getSize()+"字节"+"MB="+file.getSize()/1024/1024+"MB");
}else {
log.error("上传失败,文件名为："+file.getOriginalFilename()+"文件大小="+file.getSize()+"字节"+"MB="+file.getSize()/1024/1024+"MB");
}
return flag;
}
/**
* #!/bin/bash
*
* # 安装vsftpd
* sudo yum remove vsftpd -y
* sudo yum install vsftpd -y
*
* # 启动vsftpd服务
* sudo systemctl start vsftpd
*
* # 检查服务状态
* sudo systemctl status vsftpd
* 云服务器记得开端口
*
* 创建一个新用户
* 切记 必须在/etc/vsftpd/user_list
*
* 指定允许使用vsftpd的用户列表文件=》 也就是自己的用户名，要不然访问530错误
* @param url
* @param port
* @param username
* @param password
* @param path
* @param path1
* @param filename
* @param input
* @return
*/
public boolean uploadFile(String url,// FTP服务器hostname
int port,// FTP服务器端口
String username, // FTP登录账号
String password, // FTP登录密码
String path, // FTP服务器保存目录
String path1, // FTP服务器保存目录1
String filename, // 上传到FTP服务器上的文件名
InputStream input // 输入流
){
boolean success = false;
FTPClient ftp = new FTPClient();
ftp.setControlEncoding("UTF-8");
try {
boolean b = false;
int reply;
ftp.connect(url, port);// 连接FTP服务器
// 如果采用默认端口，可以使用ftp.connect(url)的方式直接连接FTP服务器
ftp.login(username, password);// 登录
reply = ftp.getReplyCode();// 获取服务器的响应码。
if (!FTPReply.isPositiveCompletion(reply)) {
ftp.disconnect();
return success;
}
ftp.setFileType(FTPClient.BINARY_FILE_TYPE);
ftp.makeDirectory(path); //创建文件夹
ftp.changeWorkingDirectory(path); //切换到文件夹
// ftp.makeDirectory(path1);
// ftp.changeWorkingDirectory(path1);
b = ftp.storeFile(filename, input);//最终默认上传到 /home/ftpuser 目录下 批次id目录内
if (b){
//异步写入日志
asynWriteVideoImportLog(path, filename, input);
}
input.close();
ftp.logout();
success = b;
} catch (IOException e) {
e.printStackTrace();
} finally {
if (ftp.isConnected()) {
try {
ftp.disconnect();
} catch (IOException ioe) {
}
}
}
return success;
}