如何在浏览器上传一个文件（图片）到服务器

总体思路：前端通过input type为file的表单将图片提交到后台（ajax请求），后台拿到文件并存储到指定目录，当前端上传成功后再发另一个请求向服务器要文件名，通过img标签src去访问。

HTML内容

1.form 表单enctype是将文件上传服务器，不加这个属性上传的是文件名
2.input file必须有name属性且

<form action='http://127.0.0.1:3000/upload' method='post' enctype= 'multipart/form-data'>
	<input type='file' name="xxx"></input>
	<input type='submit' value="提交"></input>
</form>

通常我们用Ajax来发送请求，而不用表单

server内容

用nodejs搭建的后台服务器

const express = require('express')
const multer = require('multer')
// 指定上传到服务器的目录
const upload = multer({dest:'yyy/'})
const app = express()
app.get('/',(req,res)=>{
    res.send('hello nodejs')
})
//single里指定文件的name
app.post('/upload',upload.single('xxx'),(req,res)=>{
    console.log(req.file);
    res.send('上传成功')
})
app.listen(3000,()=>{console.log('3000端口启动了');})