<body>

  <img src="" alt="" id="img">

    <input type="file" name="myfile" size="50" id="file">

  <script src='https://cdn.bootcss.com/axios/0.16.1/axios.min.js'></script>

//使用的axios库发起http请求

  <script src='https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js'></script>

  <script>

    $("#file").change(function () {

var file = $(this)[0].files[0]

//拿到上传文件的信息

//使用FormDate接口进行上传文件

      var data = new FormData()

      //  console.log(file);

      data.append("myfile", file)

      axios.post('/files', data, {

        headers: {

          'Content-Type': 'multipart/form-data'

        }

      }).then(res => {

       // console.log(res.data.data)

       $("#img").attr("src",res.data.data.url)

      })

    })

  </script>

</body>

//后台文件接口代码 ,这里使用node 作为后台语言，使用node 强大的express框架。

const express=require('express')

//使用node 第三方包multer 进行文件上传

const multer=require('multer')

//对上传文件body里的内容进行解析

var bodyParser = require('body-parser');

const PORT=4520

const app=express()

//express.static  web 静态服务器指定上传的文件

所放的目录，此处上传文件放在  imgs 文件夹下。

app.use('/files',express.static('imgs'))

app.use(bodyParser.urlencoded({ extended: false }));

  //使用multer进行指定上传文件所放的目录。

var storage = multer.diskStorage({

    destination: function (req, file, cb) {

      cb(null, path.join(__dirname,"imgs"))

    },

 //对上传文件进行命名

    filename: function (req, file, cb) {

      cb(null, file.fieldname + '-' + Date.now() + '.' +'jpg')

    }

  })

  //使用multer进行文件上传

  var file = multer({ storage: storage })

app.get('/',(req,res)=>{

 res.sendFile(path.join(__dirname,'flie.html'))

})

app.post('/files',file.single('myfile'),(req,res)=>{

//上传图片的访问路径

   const url=(`http://127.0.0.1:4520/files/${req.file.filename}`);

    res.send({

      status:200,

      msg:"sucessful",

      data:{

        url

      }

    })

})

app.listen(PORT,()=>{

    console.log(`服务器运行在${PORT}`);

})

关于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. python 读取目录下的文件

    参考方法: import os path = r'C:\Users\Administrator\Desktop\file' for filename in os.listdir(path): prin ...

  2. 第 6篇 Scrum 冲刺博客

    一.站立式会议 1.站立式会议照片 2.昨天已完成的工作 完成了在数据库中对商品信息的查询 职工管理页面 3.今天计划完成的工作 完成对商品信息的分析 计划分析并编写职工信息模块代码 4.工作中遇到的 ...

  3. 【题解】P3629 [APIO2010]巡逻

    link 题意 有 \(n\) 个村庄,编号为 \(1, 2, ..., n\) .有 \(n – 1\) 条道路连接着这些村 庄,从任何一个村庄都可以到达其他任一个村庄.道路长度均为 1. 巡警车每 ...

  4. Codeforces Edu Round 66 A-E

    A. From Hero to Zero 通过取余快速运行第一步即可.由于\(a \% b (a >= b) <= \frac{a}{2}\).所以总复杂度不超过\(O(log_2n)\) ...

  5. spark streaming 消费 kafka入门采坑解决过程

    kafka 服务相关的命令 # 开启kafka的服务器bin/kafka-server-start.sh -daemon config/server.properties &# 创建topic ...

  6. 【Go语言绘图】图片添加文字（一）

    前一篇讲解了利用gg包来进行图片旋转的操作,这一篇我们来看看怎么在图片上添加文字. 绘制纯色背景 首先,我们先绘制一个纯白色的背景,作为添加文字的背景板. package main import &q ...

  7. 【实时渲染】实时3D渲染如何加速汽车线上体验应用推广

    在过去,一支优秀的广告片足以让消费者对一辆汽车产生兴趣.完美的底盘线条或引擎的轰鸣声便会让潜在买家跑到经销商那里试驾.现在,广告还是和往常一样,并没有失去其特性,但86%的买家在与销售交流之前会在网上 ...

  8. fiddler抓APP的https接口

    吐槽一下,fiddler这工具很蛋疼,用的时候很好用,出bug的时候死活抓不了: ①为了少踩坑,我们在官网下最新的fiddler,官网:Fiddler - Free Web Debugging Pro ...

  9. windows Server 2016安装Sqlserver远程连接的坑

    如果要连接远程服务器 首先打开防火墙端口1433  新建入站规则 然后 如果没启用 就启用  然后重启服务就行 如果还是不行 进去属性  修改三处 然后重启服务

  10. 类似818tu.c微信小说分销系统设计之多公众号网页授权自动登录源码分享

    /** 转载请保留原地址以及版权声明,请勿恶意修改 *  作者:杨浩瑞  QQ:1420213383  独立博客:http://www.yxxrui.cn * [后台]http://xiaoshuo. ...