注:主要是说明后端逻辑和数据库表设计

1.当前主流的几种文件上传&预览&下载方式

  • 把文件直接存储在服务器
  • 分布式存储OSS,比如阿里OSS、Minio

2.数据库表设计

  1. 由于文件都是跟业务关联的,比如评论里面掺杂评论图片,常规的设计就是在'评论表'添加上传'图片名称'字段和'图片相对路径',在上传成功后返回给前端

    1.1 如果是加入多个文件的话,这种设计就不太合适:10个文件在评论表就需要加20个字段

    1.2 针对'1.1'进行改进,建一种'文件信息表',设计字段'外键 fk_id'用来存储评论id(如果后续有商品图片也可以用这个存),这时候有需要考虑一个问题,id是根据什么生成的,是否唯一,如果是雪花ID就无需考虑这个问题,但如果是递增那极可能重复(商品id和评论id同时为1的情况);这时就还需要在'文件信息表'添加一个'外键类型 fk_type'作区分,比如评论就是comment,商品就是goods。然后把'图片名称'字段和'图片相对路径'放到'文件信息表'来(预览路径和下载路径可能不同,下载路径是绝对路径,预览路径为了防止用户直接访问服务器其他位置,做一层虚拟映射nginx)

1.3 可能还需要加一个'文件下载名称',由于文件可能是'数字+字母(可能是md5)'的形式(如果是手机拍摄),然后要按照一定的规则比如'订单编号-产品名称-用户昵称'生成

3.后端实现

1.直接使用Java下载到指定目录(现根据外键查询出绝对路径,在下载)

@Override
public void downloadByOrderId(HttpServletResponse response, Long orderId, String fkType) throws IOException {
String fileLocation = null;
try{
// 一个订单只有一个报告pdf
QueryWrapper<FileUpload> fileUploadQueryWrapper = new QueryWrapper<>();
fileUploadQueryWrapper.eq("is_deleted","0");
fileUploadQueryWrapper.eq("fk_id",orderId);
fileUploadQueryWrapper.eq("fk_type",fkType);
FileUpload uploadEntity = uploadMapper.selectOne(fileUploadQueryWrapper); response.setHeader("content-type", "application/octet-stream");
response.setContentType("application/octet-stream"); //这边可以设置文件下载时的名字,我这边用的是文件原本的名字,可以根据实际场景设置
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(uploadEntity.getOldName(), "UTF-8")); if(StrUtil.isNotBlank(uploadEntity.getLocation())){
fileLocation = uploadEntity.getLocation();
}
logger.info("fileLocation: "+fileLocation); FileUtils.writeBytes(uploadEntity.getLocation(), response.getOutputStream());
}catch (Exception e){
logger.error("download error orderId: {} fkType: {} && fileLocation: {} msg: {}",orderId,fkType,fileLocation,e.getMessage());
}
} public static void writeBytes(String filePath, OutputStream os) {
FileInputStream fi = null;
try {
File file = new File(filePath);
if (!file.exists()) {
throw new FileNotFoundException(filePath);
}
fi = new FileInputStream(file);
//TODO 扩大缓冲,多线程(请求的节点过多超时)
byte[] b = new byte[8192];
int length;
while ((length = fi.read(b,0,8192)) > 0) {
os.write(b, 0, length);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if(os != null) {
try {
os.close();
}catch (IOException e) {
e.printStackTrace();
}
}
if(fi != null) {
try {
fi.close();
}catch (IOException e) {
e.printStackTrace();
}
}
}
}

2.分布式存储Minio,参考博客:https://www.freesion.com/article/5069848586/ (下载和上面的方式相同 根据文件名先去Minio查询,获取输入流,然后下载)

文件的上传&预览&下载学习(一)的更多相关文章

  1. PHP WAMP 文件上传 及 简单的上传预览

    ...... 使用特殊的表单类型file, 主(上传)页面: <form action="chuli.php" method="post" enctype ...

  2. 上传文件的三种方式xhr,ajax和iframe及上传预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  4. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

  5. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  6. FileReader()读取文件、图片上传预览

    前言 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据. 其中File对象可以是来自用户 ...

  7. 用file标签实现多图文件上传预览

    效果图: js 代码: <script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document ...

  8. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  9. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  10. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

随机推荐

  1. 2.TS 的数据类型

    一.定义变量 TS 中创建变量有四个要素: 定义变量的关键字:var.let.const 变量名 变量的数据类型 变量的初始值 语法结构如下: let 变量名: 数据类型 = 初始值 注意,变量的初始 ...

  2. ansible-file

    path参数 :必须参数,用于指定要操作的文件或目录,在之前版本的ansible中,使用dest参数或者name参数指定要操作的文件或目录,为了兼容之前的版本,使用dest或name也可以. stat ...

  3. linux(centos7)下部署jenkins

    1.安装jdk yum install -y java 确保已经安装了jdk,查看是否安装jdk命令参考地址: 2.安装jenkins 2.0添加Jenkins库到yum库,Jenkins将从这里下载 ...

  4. MSSQL 查看数据库所有的触发器

    SELECT object_name(a.parent_obj) as [表名] ,a.name as [触发器名称] ,(case when b.is_disabled=0 then '启用' el ...

  5. Java-token生成

    1. 引入jar包 <dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt< ...

  6. 在 MAC 上 进行 iOS 的 Airtest 自动化测试(未完成)

    1. 用USB连接 iPhone 和 mac . 从 连接 https://github.com/AirtestProject/IOS-Tagent 下载iOS-Targent工程文件, 在左上角选择 ...

  7. <魔域之书> Roguebook 存档修改器

    魔域之书 这个多周目游戏还挺不错的,游戏是Unity3d做的,网上没有找到现成的修改器,自己用CE修改的话,由于是基于虚拟机的游戏,在Dnsyp中看了,源码,游戏数据都存在不同的 Observable ...

  8. pads:数据格式不正确,网络必须包含一个以上管脚

    1,如果已经有pcb封装,则在pads logic软件里面-元件编辑器-重新做封装,在--编辑电参数--里面匹配对应pcb封装, 2,点击-工具--,--从库中更新--,更新一下,之后导入pcb la ...

  9. Alibaba Cloud Linux 3.2104 64位安装nginx-1.16.1

    1   下载nginx 从nginx官网 http://nginx.org/ 下载新的稳定版本nginx 并上传到linux服务器  2  安装nginx 所需要的扩展 yum -y install ...

  10. 求小于N的最大素数

    问题 求小于N的最大素数 分析 枚举:从可能的集合中一一列举各元素 枚举过程中需要考虑的问题: 给出解空间 减少搜索的空间 采用合适的搜索顺序 枚举关键字(枚举核心):减少规模 代码实现 1 impo ...