express图片上传

最新推荐文章于 2023-06-04 20:25:50 发布

太努力容易优秀

最新推荐文章于 2023-06-04 20:25:50 发布

阅读量1.1k

点赞数

分类专栏： express node multer 文章标签： node.js

本文链接：https://blog.youkuaiyun.com/weixin_43623017/article/details/106330844

版权

node 同时被 3 个专栏收录

3 篇文章

订阅专栏

express

1 篇文章

订阅专栏

multer

1 篇文章

订阅专栏

安装multer

npm install multer -D

server端

const express = require('express')
const multer = require('multer')
const app = express()
const port = 3000
const path = require('path')
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
  	// 这里是在server端要放图片的目录
    cb(null, './static/img')
  },
  filename: function (req, file, cb) {
  	// 这里是对文件重命名
    cb(null, file.originalname)
  }
})
 
var upload = multer({ storage: storage })

//使用express中间件来实现静态资源服务
//通过http://10.221.224.135:3000/public/   可以访问static下的目录
app.use('/public',express.static(path.join(__dirname,'./static')))
app.get('/', (req, res) => res.send('Hello World!'))

//single中的字段要和前端上传的formData的字段一致
app.post('/upload',upload.single('file'),(req,res)=>{
    console.log(req.file)
    const { path } = req.file
    let paths = path.replace('\\','/') 
    res.send({message:'success',fileurl:paths})
    //返回在server端存放的路径
})

app.listen(port, () => console.log(`Example app listening on port port!`))

web端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input class="upload" type="file" ref="upload" accept="image/jpeg,image/jpg,image/png">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
<script>
    const upload = document.getElementsByClassName('upload')[0]
    upload.onchange=(e)=>{
        let file = e.target.files[0]
        let formdata = new FormData()
        formdata.append('file', file)
        axios.post('http://10.221.224.135:3000/upload',formdata,{
            headers: {
          		'Content-Type': 'multipart/form-data'
            },
            transformRequest: [function (data) {
                return data
            }],
        }).then((data)=>{
            console.log(data)
        })
    }
</script>
</html>