axios请求express上传保存图片

express是个非常好的基于noe的web框架…

我们直接上实列代码吧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body>
<input type="file" onchange="UP()"/><script>function upfile(e){console.log(e.files);}function UP(){console.log(event.target.files[0])let img = event.target.files[0];let Form = new FormData();//formdata上传Form.append('avatar', img);$.ajax({url: '上传express路由url',type: 'post',anync: true,processData: false,contentType: false,data:Form,success: function (data) {console.log(data)}});}</script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

var express = require('express');
var app = express();
const fs = require('fs')//node的文件读取模块
const path = require('path')
const bodyParser = require('body-parser')// 引入body-parser中间件，用来处理post请求体body中的数据
const multer = require('multer')// 引入multer中间件，用于处理上传的文件数据app.use(express.static('public'))// 静态资源
app.use('/static', express.static('public'))// 静态资源地址
app.use(multer({ dest: './public/' }).any())// 通过配置multer的dest属性， 将文件储存在项目下的tmp文件中app.get('/index.html', function(req, res){// 访问index.html页面因为不知道本地res.sendFile(__dirname + '/index.html')
})app.post('/处理路由url', function(req, res){// 上传接口let old = req.files[0].path //获取path: 'public\\upload\\0f625978d5d1a783b12e149718f8b634',let name = req.files[0].path + path.parse(req.files[0].originalname).ext fs.renameSync(old, name)res.json({//返回保存的图片名称'imgpath':name});
})
const server = app.listen(3000, function(){console.log('服务器已经启动成功')
})

请求发送成功

我们的文件

axios请求express上传保存图片相关推荐

接口请求，上传byte数组byte[]数据异常，负数变正数/负数变63
接口请求,上传byte数组byte[]数据异常,负数变正数/负数变63 参考文章: (1)接口请求,上传byte数组byte[]数据异常,负数变正数/负数变63 (2)https://www.cnbl ...
使用FormData，进行Ajax请求并上传文件
使用FormData,进行Ajax请求并上传文件这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: Html代码 <form id= " ...
FastAPI从入门到实战（11）——表单请求与上传文件
本文主要记录表单的数据请求以及上传不同大小的文件.上传多个文件.获取文件信息等相关内容. 表单请求 @app07.post("/stu07/form") def stu07_for ...
苹果cms请求接口上传异常是怎么回事
用苹果cmsv10做视频网站时候出现这个现象,其实解决方法挺简单的,以下方法是演示通过宝塔操作. 1.检查文件夹的权限,如果权限正常请重新确定保存下.如果这样还不能上传图片的话,请参考方法2: 2.修 ...
apipost怎么模拟post请求文件上传
在做接口测试的时候一般会有文件上传的post请求的接口需要进行测试,apipost可以简单的对文件上传功能进行接口测试. 首先新建一个接口输入一个测试网址在body里面输入需要实现文件上传的参数名 ...
vue+axios+nodejs+multer上传文件的坑
在做前后端分离的项目时.我们就不能使用form表单来提交数据或者上传文件了,那么就只能通过vue的axios来提交数据,如果数据中有文件类型的数据,就需要将所有需要上传的数据添加到FormData对象 ...
【前端】wangeditor源码修改，打包发布到npm，实现上传视频功能，得到视频的第一帧保存为封面，spring-boot+vue，axios实现文件上传，视频图片浏览
一.实现 1.创建git分支,clone下源码 git地址创建分支 2.图片上传具有文件选择的功能,所以我完全模仿(抄袭)图片上传报错不慌,全部改完就不报错了 1)在src/config/inde ...
AJAX的post请求与上传文件
之前介绍了AJAX的get的请求方式与跨域请求,除此之外AJAX还可以进行异步的post请求,在使用post方式的请求时需要设置请求头,如下: xhr.setRequestHeader("C ...
PHP的CURL：请求接口模拟请求登陆上传下载
步骤使用CURL的PHP扩展完成一个HTTP请求的发送一般有以下几个步骤:初始化:初始化连接句柄: 设置:设置CURL选项: 执行:执行并获取结果: 得出:释放VURL连接句柄. 代码 // 1. ...

axios请求express上传保存图片

axios请求express上传保存图片相关推荐

最新文章

热门文章