<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. Docker 安装-在centos7下安装Docker（二）

    参考docker安装的方式: http://www.runoob.com/docker/centos-docker-install.html Docker中文官网安装步骤:https://docs.d ...

  2. 题解-Magic Ship

    Magic Ship 你在 \((x_1,y_1)\),要到点 \((x_2,y_2)\).风向周期为 \(n\),一个字符串 \(s\{n\}\) 表示风向(每轮上下左右),每轮你都会被风向吹走一格 ...

  3. HashMap相关类：Hashtable、LinkHashMap、TreeMap

    前言 很高兴遇见你~ 在 深入剖析HashMap 文章中我从散列表的角度解析了HashMap,在 深入解析ConcurrentHashMap:感受并发编程智慧 解析了ConcurrentHashMap ...

  4. jfinal 导出excle

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

  5. 三、java多线程核心技术（笔记）——线程的优先级

    概论: 在操作系统中,线程可以划分优先级,优先级高的获得的CPU资源较多,也就是CPU优先执行优先级较高的线程.在JAVA中线程的优先级 分1~~10个10个等级.大于或者小于会报异常. 一.线程优先 ...

  6. 后台运行程序nohup的使用

    linux后台运行程序 nohup python3 test.py >output 2>&1 & 参数解释 用途:不挂断地运行命令. 语法:nohup Command [ ...

  7. Python 学习笔记 之 随着学习不断更新的Python特性搜集

    大小写敏感 缩进敏感--tab和空格不要混用,最好使用4个空格进行缩进.可使用vim配置缩进字符为4个空格 编写py文件时注意文件的编码,UTF-8 without BOM, 并且记得声明coding

  8. 解决python3 ,ModuleNotFoundError: No module named 'pip'问题

    今天想要装一下PyYmal第三方库来写一下Python的desired_caps.yaml文件,候发现cmd窗口下无法执行pip命令, 出现了:ModuleNotFoundError: No modu ...

  9. WPF TextBox 实现CornerRadius圆角

    <Grid Background="Gray" Height="230" Width="229"> <Border Cor ...

  10. 谷歌学术： but your computer or network may be sending automated queries. To protect our users, we can't process your request right now. See Google Help for more information.

    原因是屏蔽了日本和新加坡的服务器,切换服务器为其他地方即可