axios.post上传图片
时间: 2023-12-05 16:40:32 浏览: 35
以下是使用axios.post上传图片的示例代码:
```javascript
import axios from 'axios';
// 选择图片文件
const file = document.querySelector('input[type="file"]').files[0];
// 创建FormData对象
const formData = new FormData();
formData.append('image', file);
// 发送POST请求
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data);
}).catch(error => {
console.error(error);
});
```
上述代码中,我们首先通过`document.querySelector`方法获取了一个`<input>`元素,然后从中选择了第一个文件。接着,我们创建了一个`FormData`对象,并将选中的文件添加到其中。最后,我们使用`axios.post`方法向服务器发送POST请求,并将`FormData`对象作为请求体发送。在请求头中,我们设置了`Content-Type`为`multipart/form-data`,以告诉服务器我们发送的是一个包含文件的表单数据。
相关问题
axios.post 设置请求头上传图片
可以使用axios.post设置请求头来上传图片,例如:let config = { headers: { 'Content-Type': 'multipart/form-data' } } axios.post('/upload', formData, config)
vue使用axios发送post请求上传照片
首先需要安装axios和qs:
```
npm install axios qs --save
```
然后在Vue组件中引入axios:
```javascript
import axios from 'axios'
import qs from 'qs'
```
然后在发送POST请求时,需要将请求头中的`Content-Type`设置为`multipart/form-data`,并使用FormData来包装请求数据。示例代码如下:
```javascript
let formData = new FormData()
formData.append('file', file) // file为照片文件
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
console.log(response.data)
}).catch(error => {
console.log(error)
})
```
在后端服务器中,可以使用如下代码来处理上传的文件:
```javascript
const express = require('express')
const app = express()
const multer = require('multer')
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, file.originalname)
}
})
const upload = multer({ storage: storage })
app.post('/upload', upload.single('file'), (req, res) => {
console.log(req.file)
res.send('上传成功')
})
app.listen(3000, () => {
console.log('Server is running...')
})
```
其中,`upload.single('file')`表示只处理名为`file`的文件。`req.file`表示上传的文件信息。