Node 文件上传

sPeng 发布于2019-08-20 16:46 / 3394人阅读

摘要：使用来完成文件上传的需求项目地址技术栈中专门用来处理文件上传的中间件，不是唯一文件初始路径处理使用专门用来处理文件的属性注意添加表单的上传文件遇到的问题及解决方案文件部署如果文件处理需要一直的修改某一文件比如那么服务端是没法搞

使用node来完成文件上传的需求 项目地址:github 技术栈

node.js

express

multer

multer

multer node 中专门用来处理文件上传的中间件，不是唯一

let storage = multer.diskStorage({
  destination: function (req, file, cb) {
    // 文件初始路径
    let filePath = path.join(__dirname, "upload");
    if (!fs.existsSync(filePath)) {
      fs.mkdir(filePath, (err) => {
        if (err) {
          console.log(err)
        } else {
          cb(null, filePath)
        }
      })
    } else {
      cb(null, filePath)
    }
  },
  filename: function (req, file, cb) {
    var ext = path.extname(file.originalname);
    // UUID 处理
    function guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == "x" ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }
    cb(null, file.fieldname + guid() + Date.now() + ext)
  }
})

使用HTML5专门用来处理文件的input属性file

注意添加form表单的 method="post" enctype="multipart/form-data"

遇到的问题及解决方案 文件部署

如果文件处理需要一直的修改某一文件比如data.json, 那么服务端git是没法搞得，因为每次修改之后都得重新去git pull代码，解决方案是建立一个data.json.dist 文件，告知data.json文件是存在的，然后当部署之后再生成data.json文件就可以完美解决这个问题了

url转码

使用encodeURIComponent去做url转码，因为会有&符号的存在，encodeURI是没法去处理的，会导致url地址错误

使用// 而非/ 引入外部文件

受限于https和http协议，使用 / 引入而使用https协议访问网页时会报错，并且会锁定文件，而使用 // 就可以避免这个问题从而达到自适应 协议

数据的处理

注意json数据格式的转换，以及 res.end/send 数据要求

防止文件命名重复 UUID

// UUID 处理
    function guid() {
      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
          v = c == "x" ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      });
    }

表单数据的处理

采用 XMLHttpRequest 2 的新API Formdata处理表单

node 的多进程

使用pm2通过配置可以开启多个node程序，并且窗口关闭后依然可以正常使用，结束方法为 命令 pm2 stop "fileName" 详情参考官网

源码在文章标题下方

GPU云服务器云服务器断点视频上传文件上传 js文件上传夹上传上传文件? 上传文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83155.html

Node+H5实现大文件分片上传(有源码)

摘要：话前上传大文件上传的教程网上很多但是大部分没给出一个比较完整的出来这个博客给出的是前后端一套完整的解决方案其中前端没有使用第三方上传库希望能帮到有同样需求的朋友们大文件分片上传的好处在这里就不用多说了之前不管是上传单文件还是分片文件上传都是话前上传大文件上传的教程网上很多, 但是大部分没给出一个比较完整的出来, 这个博客给出的是前后端一套完整的解决方案, 其中前端没有使用第三方上传...

1treeS 2019-08-20 15:29 评论0 收藏0
用Node处理文件上传

摘要：前言在开发中，文件上传是一个非常常见非常重要的功能。本文将介绍如何用处理上传的文件。前端界面如下用户从浏览器中选择文件，点击上传，将发起请求到服务器，服务器将接受到的文件存储在服务器硬盘中。前言在Web开发中，文件上传是一个非常常见、非常重要的功能。本文将介绍如何用Node处理上传的文件。需求分析由于现在前后端分离很流行，那么本文也直接采用前后端分离的做法。前端界面如下：sho...

HtmlCssJs 2019-08-22 18:33 评论0 收藏0
H5拖放+FormData接口+NodeJS，完整异步文件上传（一）

摘要：前段时间面试过程中，频繁遇到异步文件上传的相关问题。所以，这会是一个拖放接口实现文件异步上传的完整。监听放置元素的事件，通过对象可以获得拖拽事件的状态及数据。后端文件接收保存后端使用实现文件上传。前段时间面试过程中，频繁遇到H5异步文件上传的相关问题。还遇到过一个通过H5拖放功能实现文件异步上传的问题，大概知道H5有新增拖拽功能可以接收文件，如何异步上传文件就母鸡了(摊手)。面试...

NervosNetwork 2019-08-22 15:57 评论0 收藏0