vue前后端不分离用axios怎么实现上传图片到指定文件夹
时间: 2024-03-17 12:46:05 浏览: 16
如果你的前后端不分离,那么你可以使用 `form` 表单来实现上传图片。具体步骤如下:
1.在你的前端页面中添加一个 `form` 表单,其中 `enctype` 属性需要设置为 `multipart/form-data`,并且添加一个 `input` 标签,`type` 属性设置为 `file`,`name` 属性设置为你想要的参数名,例如 `file`:
```html
<form enctype="multipart/form-data" method="post" action="/upload">
<input type="file" name="file" />
<button type="submit">上传图片</button>
</form>
```
2.在你的后端代码中,使用类似于以下的代码来处理上传的文件:
```javascript
const fs = require('fs')
const path = require('path')
const express = require('express')
const app = express()
app.post('/upload', (req, res) => {
const file = req.files.file
const filePath = path.join(__dirname, 'uploads', file.name)
// 将文件保存到指定的文件夹中
file.mv(filePath, (err) => {
if (err) {
return res.status(500).send(err)
}
res.send('文件上传成功!')
})
})
app.listen(3000, () => {
console.log('服务器已启动...')
})
```
在上面的代码中,我们首先获取上传的文件对象 `req.files.file`,然后使用 `mv` 方法将文件保存到指定的文件夹中。
注意:上述代码仅供参考,需要根据你的实际情况进行修改。