关于ajax 异步文件上传 node 文件后台接口
<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 文件后台接口的更多相关文章
- SpringMVC文件上传 Excle文件 Poi解析 验证 去重 并批量导入 MYSQL数据库
SpringMVC文件上传 Excle文件 Poi解析并批量导入 MYSQL数据库 /** * 业务需求说明: * 1 批量导入成员 并且 自主创建账号 * 2 校验数据格式 且 重复导入提示 已被 ...
- spring mvc文件上传(单个文件上传|多个文件上传)
单个文件上传spring mvc 实现文件上传需要引入两个必须的jar包 1.所需jar包: commons-fileupload-1.3.1.jar ...
- struts2文件上传,文件类型 allowedTypes
struts2文件上传,文件类型 allowedTypes 1 '.a' : 'application/octet-stream', 2 '.ai' : 'application/postscript ...
- SpringMVC单文件上传、多文件上传、文件列表显示、文件下载(转)
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程 ...
- webAPI文件上传时文件过大404错误的问题
背景:最近公司有个需求,外网希望自动保存数据到内网,内网有2台服务器可以相互访问,其中一台服务器外网可以访问,于是想在 这台服务器上放个中转的接口.后来做出来以后测试发现没有问题就放线上去了,不顾发现 ...
- maven工程 java 实现文件上传 SSM ajax异步请求上传
java ssm框架实现文件上传 实现:单文件上传.多文件上传(单选和多选),并且用 ajax 异步刷新,在当前界面显示上传的文件 首先springmvc的配置文件要配置上传文件解析器: <!- ...
- 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
- Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除
前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...
- spring boot:单文件上传/多文件上传/表单中多个文件域上传(spring boot 2.3.2)
一,表单中有多个文件域时如何实现说明和文件的对应? 1,说明和文件对应 文件上传页面中,如果有多个文件域又有多个相对应的文件说明时, 文件和说明如何对应? 我们在表单中给对应的file变量和text变 ...
随机推荐
- 团队作业part4--项目冲刺
七天敏捷冲刺汇总 1. Day1 Scrum 冲刺博客 2. Day2 Scrum 冲刺博客 3. Day3 Scrum 冲刺博客 4. Day4 Scrum 冲刺博客 5. Day5 Scrum 冲 ...
- 原生js获取页面所有的checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Springboot mini - Solon详解(一)- 快速入门
一.Springboot min -Solon 最近号称 Springboot mini 的 Solon框架,得空搞了一把,发觉Solon确实好用,小巧而快速.那Solon到底是什么,又是怎么好用呢? ...
- 【题解】P1852 跳跳棋
link 题意 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子.棋盘上有3颗棋子,分别在 \(a,b,c\) 这三个位置.我们要通过最少的跳动把他们的位置移动成 \(x,y, ...
- 图论-zkw费用流
图论-zkw费用流 模板 这是一个求最小费用最大流的算法,因为发明者是神仙zkw,所以叫zkw费用流(就是zkw线段树那个zkw).有些时候比EK快,有些时候慢一些,没有比普通费用流算法更难,所以学z ...
- SQL实现_同时在线人数
原始数据表结构如下: user_id login_time logout_time 12 2020-12-10 20:45:18 2020-12-10 21:45:18 只说下实现思路,SQL不太难, ...
- 计算机网络——HTTP知识点整理
1.HTTP简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议.它可以使浏览器更加高效,使网络传输减少.它 ...
- STL——容器(Map & multimap)的简述与构造
1. map/multimap 的简介 map 是标准的关联式容器,一个 map 里存储的元素是一个键值对序列,叫做 (key,value) 键值对.它提供基于 key 快速检索数据的能力. map ...
- [python学习手册-笔记]004.动态类型
004.动态类型 ❝ 本系列文章是我个人学习<python学习手册(第五版)>的学习笔记,其中大部分内容为该书的总结和个人理解,小部分内容为相关知识点的扩展. 非商业用途转载请注明作者和出 ...
- element Cascader 多选 点击文字选中
html 部分 1 <el-form-item label="A部署位置" > 2 <el-cascader 3 v-model="itemType.a ...