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

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. leecode编写记录

    记录leecode刷题思路 39.组合总数 39. 组合总和 - 力扣(LeetCode) 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target ,找出 candida ...

  2. Ant Design 抽屉(tabel)

    效果图如下,因部分涉及到人员隐私,所以打码了,就是一些图片文字信息. 有不足的地方可以麻烦提出来的,一起学习的. <template> <a-drawer v-model:visib ...

  3. Mysql语句练习

    某宾馆其关系模式如下:Room(房间编号,房间类型,价格)Customer(顾客编号,顾客姓名,年龄,电话)RC(房间号,顾客编号,入住日期,入住天数) 1 create database Hotel ...

  4. win10下载jdk并配置环境变量

    win10下载jdk并配置环境变量 1. jdk下载 下载官网:Java SE开发套件15.0.2 2. jdk安装 一直点下一步就可以 3. 环境变量 配置 右键我的电脑--属性--高级系统设置-- ...

  5. SpringBoot怎么管理封装java包的关系

    首先SpringBoot直接写注解加依赖就可以了,基本上不用写xml,非常方便,在这里我只写了两个核心包 为什么选择jar类型? SpringBoot基本上是个应用程序了,只要用java命令程序去运行 ...

  6. JDBC与JPA--初学JPA

      最近工程中用到JPA,头一次接触,踩了不少坑.刚好复习到JDBC,发现JPA用起来真是很简单.就对比一下这两者的区别 总结:JDBC是更接近数据库SQL的抽象,使用时依然使用的是SQL.优点是靠近 ...

  7. #科技 #资讯 #生活 微信测试更多图片打开方式,神州圆满发射,英伟达或停产性价比神卡,SAMSUNG新一代显存带宽容量双翻倍,这就是今天的其它大新闻

    今天是2022年12月01日 十一月初八 现在是中午12:10 下面是今天的其他大新闻 #NEWS 1 # 微信测试用不同小程序打开图片:快捷调用小程序打开图片.视频.文件 ( 新浪科技 ) 据悉,微 ...

  8. https://计算机等级分类总结

    4个等级: 一级:定位为满足人们在一般性工作中对计算机的应用,重点是操作能力的考核: 二级:定位为计算机程序员,可谓"计算机蓝领". 三级:定位为"开发工程师" ...

  9. Think in UNL其一

    书中提到世界本质上为离散的,由一个一个对象组成.其实这个观点并不难理解,因为在公元前5世纪芝诺就有了类似的思考,著名的阿基里斯悖论早已经被推翻,现代物理学已经证明了时间和空间不是可以无限分割的,所以总 ...

  10. ssh问题、原理及diffie hellman算法

    1.普通用户无法使用证书登录:原因是权限设置问题 将.ssh目录设为700,authorized_keys设为600即可. 2.查看ssh支持的算法 ssh -Q help ssh -Q kex/ke ...