web项目图片/文件保存方式

最新推荐文章于 2024-06-30 03:26:04 发布

Bravery丶

最新推荐文章于 2024-06-30 03:26:04 发布

阅读量1.1w

点赞数 9

分类专栏：笔记文章标签： javaweb存储文件/图片

本文链接：https://blog.csdn.net/weixin_44637711/article/details/89930548

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

web项目图片/文件保存方式

其实文件和图片都是二进制流文件以下统称图片
1直接把图片存到数据库字段中
2图片存项目/public/img目录,文件名存数据库字段
3规范的使用阿里云oss/腾讯云cos存图片,数据库存图片名

其实文件和图片都是二进制流文件以下统称图片

1直接把图片存到数据库字段中

第一种做法是最简单的,直接把图片当成字符串一样来操作,用对象的一个属性来接收,CRUD不多说,但是是最低效最不实际的做法,实际情况不使用

2图片存项目/public/img目录,文件名存数据库字段

这种玩玩自己demo,没有自己服务器的时候第一首选
接下来将讲讲细节
1前端发送文件给后端应该用js预览,
如果直接每次都直接上传会有问题
为什么呢,举个例子
你现在是编辑一个商品有名称有图片图片上传了哦吼你刷新一下或者你关掉页面了
这时候图片永远都在数据库了或者新建商品已经有一个没用的商品词条了
而且每选择一次图片都会访问数据库,不会这么做的

2后端取得了图片,要把名字唯一用uuid/当前时间戳都行,再切割".",获得文件后缀
图片名变为"时间戳/uuid.格式名"例如:1557222244420.jpg,放到数据库字段中
文件用流存储到相对路径
为什么是相对路径
因为你的代码要拿到linux上线运行,放到项目的一个文件夹下,这样就可以整体迁移

最后前端只需要获得后端的图片文件名,再加上路径的拼接,就可以获得图片了

缺点,项目存了很多文件和图片,很大
所以有第三个方法
附上js预览代码

//vue中的method
bannerChange: function (event) {
                var self = this;
                var file = event.target.files[0];
                self.imgUploadInfo.banner_url = file;
                // 图片预览
                var reader = new FileReader();
                reader.onload = (function (theFile) {
                    return function (e) {
                        self.bannerFile = e.target.result;
                    }
                })(file);
                reader.readAsDataURL(file);
            },