使用 node.js 搭建本地服务模拟上传图片接口

最新推荐文章于 2024-05-15 01:41:41 发布

风吹麦田的声音

最新推荐文章于 2024-05-15 01:41:41 发布

阅读量1.2k

点赞数 1

分类专栏： js es6 对象方法文章标签： node.js javascript react.js npm 前端

本文链接：https://blog.csdn.net/weixin_45416252/article/details/123523725

版权

js 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

es6

7 篇文章 0 订阅

订阅专栏

对象方法

7 篇文章 0 订阅

订阅专栏

使用 node.js 搭建本地服务模拟上传图片接口

初始化 node 环境： npm init -y ；
下载 express 包： npm i express -S；
下载 multer 包： npm i multer -S；
新建文件 server.js 文件；
启动服务： node server.js ;

node 代码

const express = require('express')
const multer  = require('multer')
const fs = require ('fs')
const path1  = require('path')
const upload = multer({dest:'uploads/'})
const app = express()

app.use((req,res,next)=>{
	 //  设置跨域
    res.set('Access-Control-Allow-Origin','*') 
    next()
})
// 设置静态资源文件夹为uploadsFile文件夹
app.use(express.static('uploadsFile'))
app.get('/',(req,res)=>{
    res.send('返回Hello World')
})
app.post('/uploadImage',upload.single('pic'),function(req, res, next){
    console.log(req,'----------------');
    fs.renameSync(req.file.path, path1.join('uploadsFile', req.file.originalanme))
    res.send(req.file.originalanme)
})
app.listen(3000,()=>{
    console.log('服务已跑起');
})

页面代码

<!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>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        class UploadImage extends React.Component{
            constructor(props){
                super(props)
                this.state = {}
                this.myRef = React.createRef()
            }
            fnUoloadImage = ()=>{
                let uploadMsg = this.myRef.current.files[0]
                let formDatas = new FormData()
                formDatas.append('pic',uploadMsg)
                axios.post('http://localhost:3000/uploadImage',formDatas,{
                     'headers':{
                         'Content-Type':'multipart/form-data'
                     },
                      responseTpe:'text',
                }).then(res=>{
                    console.log(res);
                })
            }
            render(){
                return (
                    <div>
                        <input type="file" name='pic' ref={this.myRef} />    
                        <input type="button" value="上传图片" onClick={ this.fnUoloadImage }/>
                    </div>
                )
            }
        }
        ReactDOM.render(<UploadImage />,document.getElementById('root'))
    </script>
</body>

</html>

风吹麦田的声音

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
使用 node.js 搭建本地服务模拟上传图片接口

使用 node.js 搭建本地服务模拟上传图片接口初始化 node 环境： npm init -y ；下载 express 包： npm i express -S；下载 multer 包： npm i multer -S；新建文件 server.js 文件；启动服务： node server.js ;node 代码const express = require('express')const multer = require('multer')const fs
复制链接

扫一扫