22.课时117-幼教平台:文件上传操作

22.课时117-幼教平台:文件上传操作
图片 音频 视频存储在服务器,数据库中仅仅存放的是这些文件的地址而已。

文件上传处理,要使用formdiable插件

  1. Nodejs在处理客户端以post方式提交的数据时,比较复杂,要写两个监听,并且要处理上传的图片,文件也比较困难
  2. 常用第三方模块包formdiable来处理客户端以post提交的表单、文件、图片等
    如何使用呢?
  3. 使用命令 npm install formidable安装
    22.课时117-幼教平台:文件上传操作

注意事项:

  1. 表单提交的过程中涉及文件或图片上传,则一定要设置表单头,即在form标签上加上固定写法的属性为enctype=”multipart/form-data”,否则文件或图片会上传失败

  2. ,当中的name属性一定要赋值,详情见文档:https://github.com/node-formidable/node-formidable
    步骤:

  3. 安装 执行命令 npm install formidable –save

  4. 引入formidable
    22.课时117-幼教平台:文件上传操作

  5. 不再使用这种方式了
    22.课时117-幼教平台:文件上传操作
    而是使用formidable方式了,具体的操作步骤可以参考文档

  6. 在项目中新建文件夹dir
    22.课时117-幼教平台:文件上传操作

  7. app.js中使用formidable
    22.课时117-幼教平台:文件上传操作

  8. 重启服务器,进入localhost:2000,填写表单,选择文件,提交文件
    22.课时117-幼教平台:文件上传操作

  9. 服务器控台输出:文本信息都可以,但是文件信息不可以,是因为我们需要进行一些设置
    22.课时117-幼教平台:文件上传操作

  10. 设置表单头,默认是:application/x-www-form-urlencoded
    22.课时117-幼教平台:文件上传操作

  11. 为,当中的name属性赋值
    22.课时117-幼教平台:文件上传操作

  12. Jquery提交时不要再使用序列化,因为插件中已经做了;另外不要让jquery将数据转为字符串,以默认的对象的形式传递过去
    22.课时117-幼教平台:文件上传操作

  13. 重启服务器;数据读取成功
    22.课时117-幼教平台:文件上传操作

  14. 但是这种方式很不友好,我们做如下改变:
    1.1 删除action提交地址
    22.课时117-幼教平台:文件上传操作
    22.课时117-幼教平台:文件上传操作
    1.2 修改input提交方式为submit
    22.课时117-幼教平台:文件上传操作
    1.3 修改使用普通form提交方式
    22.课时117-幼教平台:文件上传操作
    1.4 App.js中指定文件的后缀名
    22.课时117-幼教平台:文件上传操作
    1.5 重新运行服务器,成功
    22.课时117-幼教平台:文件上传操作
    2 重新使用按钮提交
    22.课时117-幼教平台:文件上传操作

完整版,标红的为注意事项
22.课时117-幼教平台:文件上传操作