关于上传图片的逻辑

最新推荐文章于 2022-06-28 16:31:22 发布

coderyq

最新推荐文章于 2022-06-28 16:31:22 发布

阅读量1.2k

点赞数

分类专栏：处理图片文章标签： node.js 服务器

本文链接：https://blog.csdn.net/baidu_41677887/article/details/122575956

版权

文章探讨了两种图片上传方案：直接服务器上传和先本地后服务器。前者可能导致服务器空间浪费，后者处理刷新和撤销操作更优但易引发逻辑混乱。作者提出在后端设置定时清理未使用图片的策略，以兼顾效率和资源利用。如果使用第二种方式，后端接收文件位于req.files或req.file。

摘要由CSDN通过智能技术生成

本地上传和服务器上传

第一种情况:使用服务器上传

用户直接把图片上传到服务器，我们使用后端返回的图片地址在页面显示。
优点：这样无论是删除还是上传都轻松快捷，且在富文本编辑器中支持撤销
缺点：如果用户有以下操作会导致导致已经上传的图片没有被使用浪费服务器空间：
1.用户编辑的时候上传了图片但是点击了返回或者撤销。
2.用户编辑的时候刷新了页面。

第二种情况:先上传到本地，再提交到服务器

熟悉上传的开发都知道，图片可以先使用base64格式上传到本地进行预览，然后通过框架或者原生事件e.target.files去拿到File文件对象
在这里插入图片描述
将上传到本地的图片转化成base64格式：

<body>
   <input id="ipt" type="file" value="上传图片">
   <img src="" alt="">
</body>
<script>
  let preview = null;
  // 将图片资源转义成base64图片的函数
  function getBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();