1. <body>
  2.   <img src="" alt="" id="img">
  3.     <input type="file" name="myfile" size="50" id="file">
  5.   <script src='https://cdn.bootcss.com/axios/0.16.1/axios.min.js'></script>
  6. //使用的axios库发起http请求
  7.   <script src='https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js'></script>
  9.   <script>
  10.     $("#file").change(function () {
  11. var file = $(this)[0].files[0]
  12. //拿到上传文件的信息
  13. //使用FormDate接口进行上传文件
  14.       var data = new FormData()
  15.       //  console.log(file);
  16.       data.append("myfile", file)
  17.       axios.post('/files', data, {
  18.         headers: {
  19.           'Content-Type': 'multipart/form-data'
  20.         }
  21.       }).then(res => {
  22.        // console.log(res.data.data)
  23.        $("#img").attr("src",res.data.data.url)
  24.       })
  25.     })
  26.   </script>
  27. </body>
  29. //后台文件接口代码 ,这里使用node 作为后台语言，使用node 强大的express框架。
  30. const express=require('express')
  31. //使用node 第三方包multer 进行文件上传
  32. const multer=require('multer')
  33. //对上传文件body里的内容进行解析
  34. var bodyParser = require('body-parser');
  35. const PORT=4520
  36. const app=express()
  38. //express.static  web 静态服务器指定上传的文件
  39. 所放的目录，此处上传文件放在  imgs 文件夹下。
  40. app.use('/files',express.static('imgs'))
  41. app.use(bodyParser.urlencoded({ extended: false }));
  42.   //使用multer进行指定上传文件所放的目录。
  43. var storage = multer.diskStorage({
  44.     destination: function (req, file, cb) {
  45.       cb(null, path.join(__dirname,"imgs"))
  46.     },
  47.  //对上传文件进行命名
  48.     filename: function (req, file, cb) {
  49.       cb(null, file.fieldname + '-' + Date.now() + '.' +'jpg')
  50.     }
  51.   })
  52.   //使用multer进行文件上传
  53.   var file = multer({ storage: storage })
  54. app.get('/',(req,res)=>{
  55.  res.sendFile(path.join(__dirname,'flie.html'))
  56. })
  57. app.post('/files',file.single('myfile'),(req,res)=>{
  58. //上传图片的访问路径
  59.    const url=(`http://127.0.0.1:4520/files/${req.file.filename}`);
  60.     res.send({
  61.       status:200,
  62.       msg:"sucessful",
  63.       data:{
  64.         url
  65.       }
  66.     })
  67. })
  68. app.listen(PORT,()=>{
  69.     console.log(`服务器运行在${PORT}`);
  70. })

关于ajax 异步文件上传 node 文件后台接口的更多相关文章

  1. SpringMVC文件上传 Excle文件 Poi解析 验证 去重 并批量导入 MYSQL数据库

    SpringMVC文件上传 Excle文件 Poi解析并批量导入 MYSQL数据库  /** * 业务需求说明: * 1 批量导入成员 并且 自主创建账号 * 2 校验数据格式 且 重复导入提示 已被 ...

  2. spring mvc文件上传(单个文件上传|多个文件上传)

    单个文件上传spring mvc 实现文件上传需要引入两个必须的jar包    1.所需jar包:                commons-fileupload-1.3.1.jar       ...

  3. struts2文件上传，文件类型 allowedTypes

    struts2文件上传,文件类型 allowedTypes 1 '.a' : 'application/octet-stream', 2 '.ai' : 'application/postscript ...

  4. SpringMVC单文件上传、多文件上传、文件列表显示、文件下载（转）

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程 ...

  5. webAPI文件上传时文件过大404错误的问题

    背景:最近公司有个需求,外网希望自动保存数据到内网,内网有2台服务器可以相互访问,其中一台服务器外网可以访问,于是想在 这台服务器上放个中转的接口.后来做出来以后测试发现没有问题就放线上去了,不顾发现 ...

  6. maven工程 java 实现文件上传 SSM ajax异步请求上传

    java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...

  7. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

  8. Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  9. spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)

    一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...

随机推荐

  1. Win10新增API

    Win10新增API为以下一些方面: Windows.AI Windows.ApplicationModel Windows.Devices Windows.Globalization Windows ...

  2. AcWing 369. 北大ACM队的远足

    \(\text{Update on 2020.3.25}\) 我之前的做法也有问题,讨论还是不够严谨,导致又有几组(见 打卡评论区)\(\text{Hack}\) 此题数据极水,这里有几种错误写法: ...

  3. 深入理解Java虚拟机(八)——类加载机制

    是什么是类加载机制 Java虚拟机将class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这个过程就是类加载机制. 类的生命周期 一个类从加载到内存 ...

  4. jfinal 导出excle

    Controller Map<String,List<PoiUtilHeader>> result = new HashMap<String, List<PoiUt ...

  5. MySQL（一）：MySQL数据库事务与锁

    基本概念 事务是指满足ACID特性的的一组操作,可以通过Commit提交事务,也可以也可以通过Rollback进行回滚.会存在中间态和一致性状态(也是真正在数据库表中存在的状态) ACID Atomi ...

  6. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  7. ES6新增api随记

    求一个数组中的最大值 Math.max.apply(null,[1,2,3,4])=>Math.max(...[1,2,3]) 讲一个数组中的元素全部添加到另一个数组中 let arr=[1,2 ...

  8. centos 7.0下安装MySQL 5.7.26

    1.下载MySQL 5.7.26安装包,卸载自带MySQL数据库 yum remove mariadb-libs -y yum install -y libaio-devel 2.上传MySQL 5. ...

  9. 在win7下安装texlive

    首先到texlive官网下载texlive2017.iso 然后解压,找到install-tl-advanced.bat,用管理员权限双击,安装,关闭杀毒软件. 基本选择默认,前面路径可以按自己需求更 ...

  10. 判断一个对象是否为空？怎么得到一个对象的第几个键名（key）?

    var obj = {"微信":[],"qq":[]} console.log( Object.keys(obj) ) // ["微信",& ...