このチュートリアルでは、アップロードされたファイルを管理し、機能要件を追加します。自分で変更することもできます。
ファイル管理:
機能要件ビデオ:
ファイルアップロードビデオ（写真とビデオ）
まず、関数の実装を簡単に紹介します この関数の実装は、データベース、バックエンド Java、フロントエンド Vue に分かれています
ビジネス プロセス:
- vueページでアップロードをクリック後、バックエンドインターフェースを呼び出してアップロードが行われ、バックエンドが判断してアップロード場所やサイズなどを設定します。
- ファイルをアップロードした後、データベースはアップロードされたファイルを記録するファイル テーブルを設計します。
- バックエンドはアップロード後、ファイル パスをフロントエンドに返し、ファイルの場所をエコーします。
- 「OK」をクリックした後、ビジネス要件に従ってファイルの場所をデータベースに保存します。
- 写真や動画をアップロードするだけという要件なので、バックエンドでファイルの種類を判断してフィルタリングを行っており、写真や動画が保存されないわけではありません。
コードはそのすぐ下にあります。
mysql
ファイル管理用のデータシート:
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for files
-- ----------------------------
DROP TABLE IF EXISTS `files`;
CREATE TABLE `files` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '文件名称',
`type` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '文件类型',
`size` bigint NULL DEFAULT NULL COMMENT '文件大小',
`url` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '链接',
`is_delete` tinyint(1) NULL DEFAULT 0 COMMENT '是否删除',
`enable` tinyint NULL DEFAULT 1 COMMENT '是否禁用',
`creat_time` datetime NULL DEFAULT CURRENT_TIMESTAMP,
`md5` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_general_ci NULL DEFAULT NULL COMMENT '文件md5',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 444 CHARACTER SET = utf8mb3 COLLATE = utf8mb3_general_ci ROW_FORMAT = Dynamic;
SET FOREIGN_KEY_CHECKS = 1;
このデータテーブルは、ファイルがアップロードされた後のファイルの情報です。
スプリングブーツ
設定ファイル（application.yml）
spring:
# 文件大小
servlet:
multipart:
max-file-size: 5MB
# 请求大小
max-request-size: 10MB
server:
port: 端口
ip: 地址
files:
upload:
path: 文件地址
ファイル アドレス: サーバーまたはローカル フォルダーのアドレス。
pom.xml ファイル
<!-- 上传文件验证 -->
<dependency>
<groupId>org.apache.tika</groupId>
<artifactId>tika-core</artifactId>
<version>1.24.1</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.51</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.7.20</version>
</dependency>
<!-- mybatis plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.1</version>
</dependency>
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>28.1-jre</version>
</dependency>
エンティティクラス
package com.maintenanceDispatch.entity.files;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import io.swagger.annotations.ApiModel;
import java.io.Serializable;
import java.util.Date;
import lombok.Getter;
import lombok.Setter;
/**
* <p>
*
* </p>
*
* @author ysdysyn
* @since 2022-11-09
*/
@Getter
@Setter
@ApiModel("文件")
public class Files implements Serializable {
private static final long serialVersionUID = 1L;
@TableId(value = "id", type = IdType.AUTO)
private Integer id;
/**
* 文件名称
*/
private String name;
/**
* 文件类型
*/
private String type;
/**
* 文件大小
*/
private Long size;
/**
* 链接
*/
private String url;
private String md5;
/**
* 是否删除
*/
private Boolean isDelete;
/**
* 是否禁用
*/
private Boolean enable;
private Date creatTime;
}
マッパークラス
package com.maintenanceDispatch.mapper.files;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.maintenanceDispatch.entity.files.Files;
public interface FileMapper extends BaseMapper<Files> {
}
コントローラクラス
package com.maintenanceDispatch.controller.files;
import cn.hutool.core.io.FileUtil;
import cn.hutool.core.util.IdUtil;
import cn.hutool.core.util.StrUtil;
import cn.hutool.crypto.SecureUtil;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.maintenanceDispatch.common.Constants;
import com.maintenanceDispatch.common.Result;
import com.maintenanceDispatch.entity.files.Files;
import com.maintenanceDispatch.mapper.files.FileMapper;
import org.apache.tika.metadata.HttpHeaders;
import org.apache.tika.metadata.Metadata;
import org.apache.tika.metadata.TikaMetadataKeys;
import org.apache.tika.mime.MediaType;
import org.apache.tika.parser.AutoDetectParser;
import org.apache.tika.parser.ParseContext;
import org.apache.tika.parser.Parser;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.data.redis.core.StringRedisTemplate;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.xml.sax.helpers.DefaultHandler;
import javax.annotation.Resource;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.List;
import java.util.Objects;
/**
* 文件上传相关接口
*/
@RestController
@RequestMapping("/file")
public class FileController {
@Value("${files.upload.path}")
private String fileUploadPath;
@Value("${server.ip}")
private String serverIp;
@Resource
private FileMapper fileMapper;
@Autowired
private StringRedisTemplate stringRedisTemplate;
/**
* 文件上传接口
*
* @param file 前端传递过来的文件
* @return
* @throws IOException
*/
@PostMapping("/upload")
public String[] upload(@RequestParam MultipartFile file) throws IOException {
String originalFilename = file.getOriginalFilename();
//文件类型
String type = FileUtil.extName(originalFilename);
long size = file.getSize();
String url = null;
AutoDetectParser parser = new AutoDetectParser();
parser.setParsers(new HashMap<MediaType, Parser>());
Metadata metadata = new Metadata();
metadata.add(TikaMetadataKeys.RESOURCE_NAME_KEY, file.getName());
try (InputStream stream = file.getInputStream()) {
parser.parse(stream, new DefaultHandler(), metadata, new ParseContext());
}catch (Exception e){
throw new RuntimeException();
}
String suffix= metadata.get(HttpHeaders.CONTENT_TYPE);
//对比对应的文件类型的mime就好了至于不知道对应的是什么的话就百度,百度一定会知道
String[] text =suffix.split("/");
System.out.println(text[0]);
// 定义一个文件唯一的标识码
String fileUUID = IdUtil.fastSimpleUUID() + StrUtil.DOT + type;
File uploadFile = new File(fileUploadPath + fileUUID);
// 判断配置的文件目录是否存在，若不存在则创建一个新的文件目录
File parentFile = uploadFile.getParentFile();
//判断文件类型是否属于图片或者视频
if (Objects.equals(text[0], "image")){
if(!parentFile.exists()) {
parentFile.mkdirs();
}
// 获取文件的md5
String md5 = SecureUtil.md5(file.getInputStream());
// 从数据库查询是否存在相同的记录
Files dbFiles = getFileByMd5(md5);
if (dbFiles != null) {
url = dbFiles.getUrl();
} else {
// 上传文件到磁盘
file.transferTo(uploadFile);
// 数据库若不存在重复文件，则不删除刚才上传的文件
url = "http://" + serverIp + ":7777/file/" + fileUUID;
}
// 存储数据库
Files saveFile = new Files();
saveFile.setName(originalFilename);
saveFile.setType(type);
saveFile.setSize(size/1024); // 单位 kb
saveFile.setUrl(url);
saveFile.setMd5(md5);
fileMapper.insert(saveFile);
// 最简单的方式：直接清空缓存
flushRedis(Constants.FILES_KEY);
}else if (Objects.equals(text[0], "video")){
if(!parentFile.exists()) {
parentFile.mkdirs();
}
// 获取文件的md5
String md5 = SecureUtil.md5(file.getInputStream());
// 从数据库查询是否存在相同的记录
Files dbFiles = getFileByMd5(md5);
if (dbFiles != null) {
url = dbFiles.getUrl();
} else {
// 上传文件到磁盘
file.transferTo(uploadFile);
// 数据库若不存在重复文件，则不删除刚才上传的文件
url = "http://" + serverIp + ":7777/file/" + fileUUID;
}
// 存储数据库
Files saveFile = new Files();
saveFile.setName(originalFilename);
saveFile.setType(type);
saveFile.setSize(size/1024); // 单位 kb
saveFile.setUrl(url);
saveFile.setMd5(md5);
fileMapper.insert(saveFile);
// 最简单的方式：直接清空缓存
flushRedis(Constants.FILES_KEY);
}else {
url = "请上传图片或视频";
}
System.out.println(suffix);
// 从redis取出数据，操作完，再设置（不用查询数据库）
// String json = stringRedisTemplate.opsForValue().get(Constants.FILES_KEY);
// List<Files> files1 = JSONUtil.toBean(json, new TypeReference<List<Files>>() {
// }, true);
// files1.add(saveFile);
// setCache(Constants.FILES_KEY, JSONUtil.toJsonStr(files1));
// 从数据库查出数据
// List<Files> files = fileMapper.selectList(null);
// // 设置最新的缓存
// setCache(Constants.FILES_KEY, JSONUtil.toJsonStr(files));
String[] a={
url,text[0]};
return a;
}
/**
* 文件下载接口 http://localhost:9090/file/{fileUUID}
* @param fileUUID
* @param response
* @throws IOException
*/
@GetMapping("/{fileUUID}")
public void download(@PathVariable String fileUUID, HttpServletResponse response) throws IOException {
// 根据文件的唯一标识码获取文件
File uploadFile = new File(fileUploadPath + fileUUID);
// 设置输出流的格式
ServletOutputStream os = response.getOutputStream();
response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileUUID, "UTF-8"));
response.setContentType("application/octet-stream");
// 读取文件的字节流
os.write(FileUtil.readBytes(uploadFile));
os.flush();
os.close();
}
/**
* 通过文件的md5查询文件
* @param md5
* @return
*/
private Files getFileByMd5(String md5) {
// 查询文件的md5是否存在
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("md5", md5);
List<Files> filesList = fileMapper.selectList(queryWrapper);
return filesList.size() == 0 ? null : filesList.get(0);
}
// @CachePut(value = "files", key = "'frontAll'")
@PostMapping("/update")
public Result update(@RequestBody Files files) {
fileMapper.updateById(files);
flushRedis(Constants.FILES_KEY);
return Result.success();
}
@GetMapping("/detail/{id}")
public Result getById(@PathVariable Integer id) {
return Result.success(fileMapper.selectById(id));
}
//清除一条缓存，key为要清空的数据
// @CacheEvict(value="files",key="'frontAll'")
@DeleteMapping("/{id}")
public Result delete(@PathVariable Integer id) {
Files files = fileMapper.selectById(id);
files.setIsDelete(true);
fileMapper.updateById(files);
flushRedis(Constants.FILES_KEY);
return Result.success();
}
@PostMapping("/del/batch")
public Result deleteBatch(@RequestBody List<Integer> ids) {
// select * from sys_file where id in (id,id,id...)
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
queryWrapper.in("id", ids);
List<Files> files = fileMapper.selectList(queryWrapper);
for (Files file : files) {
file.setIsDelete(true);
fileMapper.updateById(file);
}
return Result.success();
}
/**
* 分页查询接口
* @param pageNum
* @param pageSize
* @param name
* @return
*/
@GetMapping("/page")
public Result findPage(@RequestParam Integer pageNum,
@RequestParam Integer pageSize,
@RequestParam(defaultValue = "") String name) {
QueryWrapper<Files> queryWrapper = new QueryWrapper<>();
// 查询未删除的记录
queryWrapper.eq("is_delete", false);
queryWrapper.orderByDesc("id");
if (!"".equals(name)) {
queryWrapper.like("name", name);
}
return Result.success(fileMapper.selectPage(new Page<>(pageNum, pageSize), queryWrapper));
}
// 设置缓存
private void setCache(String key, String value) {
stringRedisTemplate.opsForValue().set(key, value);
}
// 删除缓存
private void flushRedis(String key) {
stringRedisTemplate.delete(key);
}
}
アップロード クラスはアップロードされるファイルのタイプを決定し、必要に応じて変更できます。
他のクラスは、Vue ファイル ページのインターフェイスを提供します。
ビュー
最初の写真をレンダリングするコードに直接アクセスしてください。
<template>
<div>
<div style="margin: 10px 0">
<el-input v-model="name" placeholder="请输入名称" style="width: 200px" suffix-icon="el-icon-search"></el-input>
<el-button class="ml-5" type="primary" @click="load">搜索</el-button>
<el-button type="warning" @click="reset">重置</el-button>
</div>
<div style="margin: 10px 0">
<el-upload :action="'http://localhost:9090/file/upload'" :on-success="handleFileUploadSuccess"
:show-file-list="false" style="display: inline-block">
<el-button class="ml-5" type="primary">上传文件 <i class="el-icon-top"></i></el-button>
</el-upload>
<el-popconfirm
cancel-button-text='我再想想'
class="ml-5"
confirm-button-text='确定'
icon="el-icon-info"
icon-color="red"
title="您确定批量删除这些数据吗？"
@confirm="delBatch"
>
<el-button slot="reference" type="danger">批量删除 <i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</div>
<el-table :data="tableData" :header-cell-class-name="'headerBg'" border stripe
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="ID" prop="id" width="80"></el-table-column>
<el-table-column label="文件名称" prop="name"></el-table-column>
<el-table-column label="文件类型" prop="type"></el-table-column>
<el-table-column label="文件大小(kb)" prop="size"></el-table-column>
<el-table-column label="预览">
<template slot-scope="scope">
<el-button type="primary" @click="preview(scope.row.url)">预览</el-button>
</template>
</el-table-column>
<el-table-column label="下载">
<template slot-scope="scope">
<el-button type="primary" @click="download(scope.row.url)">下载</el-button>
</template>
</el-table-column>
<el-table-column label="启用">
<template slot-scope="scope">
<el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc"
@change="changeEnable(scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column align="center" label="操作" width="200">
<template slot-scope="scope">
<el-popconfirm
cancel-button-text='我再想想'
class="ml-5"
confirm-button-text='确定'
icon="el-icon-info"
icon-color="red"
title="您确定删除吗？"
@confirm="del(scope.row.id)"
>
<el-button slot="reference" type="danger">删除 <i class="el-icon-remove-outline"></i></el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<div style="padding: 10px 0">
<el-pagination
:current-page="pageNum"
:page-size="pageSize"
:page-sizes="[2, 5, 10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange">
</el-pagination>
</div>
</div>
</template>
<script>
import {
serverIp} from "../../public/config";
export default {
name: "File",
data() {
return {
serverIp: serverIp,
tableData: [],
name: '',
multipleSelection: [],
pageNum: 1,
pageSize: 10,
total: 0
}
},
created() {
this.load()
},
methods: {
load() {
this.request.get("/file/page", {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize,
name: this.name,
}
}).then(res => {
this.tableData = res.data.records
this.total = res.data.total
})
},
changeEnable(row) {
this.request.post("/file/update", row).then(res => {
if (res.code === '200') {
this.$message.success("操作成功")
}
})
},
del(id) {
this.request.delete("/file/" + id).then(res => {
if (res.code === '200') {
this.$message.success("删除成功")
this.load()
} else {
this.$message.error("删除失败")
}
})
},
handleSelectionChange(val) {
console.log(val)
this.multipleSelection = val
},
delBatch() {
let ids = this.multipleSelection.map(v => v.id) // [{}, {}, {}] => [1,2,3]
this.request.post("/file/del/batch", ids).then(res => {
if (res.code === '200') {
this.$message.success("批量删除成功")
this.load()
} else {
this.$message.error("批量删除失败")
}
})
},
reset() {
this.name = ""
this.load()
},
handleSizeChange(pageSize) {
console.log(pageSize)
this.pageSize = pageSize
this.load()
},
handleCurrentChange(pageNum) {
console.log(pageNum)
this.pageNum = pageNum
this.load()
},
handleFileUploadSuccess(res) {
console.log(res)
this.$message.success("上传成功")
this.load()
},
download(url) {
window.open(url)
},
preview(url) {
window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
},
}
}
</script>
<style scoped>
</style>
以下は、複数の写真とビデオを表示するための vue コードです:
**テンプレート部分**
<div v-for="testImgList in voucherId.testImgList">
<div @click="uplo(testImgList.id)">
<el-upload
:action="baseURL+'/file/upload'"
:on-success="handleAvatarSuccess3"
:show-file-list="false"
class="avatar-uploader"
v-text=""
>
<div v-if="testImgList.url" style="float: left">
<img v-show="testImgList.type" :src="testImgList.url" class="avatar">
<div v-show="!testImgList.type" style="height: 178px;width: 178px; float: left" >
<video style="" :src="testImgList.url"
class="avatar"
loop="loop" autoplay="autoplay"/>
</div>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
</div>
<i style="font-size: 50px" class="el-icon-folder-add" @click="addUrlNLXc(voucherId.id)"></i>
<br>
<el-button style="float: right;margin: 10px 10px " type="success" @click="voucherAdd()">提交</el-button>
<br>
- ループするデータである v-for の部分に注目してください。
- BaseURL はファイルをアップロードするためのインターフェイスです。たとえば、値は次のとおりです: localhost:8080
- handleAvatarSuccess3 メソッドは、バックエンドによって返された値を取得できます。つまり、ファイルアドレスです。
js部分
uplo(id){
console.log(id)
this.upid=id
},
handleAvatarSuccess3(res) {
console.log(this.upid)
if (res[0] != "请上传图片或视频") {
if (res[1]=="image"){
this.voucherId.testImgList[this.upid-1].type=true
}else {
this.voucherId.testImgList[this.upid-1].type=false
}
this.voucherId.testImgList[this.upid-1].url=res[0]
this.$message.success("上传成功")
console.log(res)
} else {
this.$message.error("请上传图片或视频")
}
console.log(this.voucherId)
},
addUrlNLXc(){
console.log(this.voucherId);
var arr={
id: this.voucherId.testImgList[this.voucherId.testImgList.length-1].id + 1,
url:'',
category:'测试凭证',
inventoryId:this.voucherId.id,
type:true
}
this.voucherId.testImgList.push(arr)
console.log(this.voucherId);
},
voucherAdd(){
console.log(this.voucherId)
this.voucherId.testImg=this.testImg
this.request.post("/main-file/save",this.voucherId.testImgList).then(res => {
this.$message.success("提交成功")
this.request.get("/inventory/findId/" + this.maintainViewid).then(res => {
console.log(res)
this.tableDatamaintain = res.data
})
this.dialogvoucherView=false
})
},
addUrlNLXc メソッドは行を追加し、データを追加します。一部の変数は未定義のため、データ戻り値の CSS 部分
で定義する必要があります。
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
float: left;
}
一部の機能には他の機能ブロックが含まれるため、それらを理解し、独自の変更の必要性を追加する必要があります。
ご不明な点やご質問がございましたら、お気軽にメッセージを残してください。
添付ファイル: このフォームを使用して、複数の写真やビデオ エコーをアップロードすることもできます。
