使用axios如何上传文件
时间: 2023-10-13 08:16:08 浏览: 40
使用axios上传文件可以通过`FormData`对象来实现。以下是一个示例:
```
// HTML Form
<form>
<input type="file" name="file" />
<button type="submit">Upload</button>
</form>
// JavaScript
const form = document.querySelector('form');
const fileInput = document.querySelector('input[type="file"]');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});
});
```
在上面的代码中,我们首先创建了一个`FormData`对象,并将上传的文件添加到该对象中。然后我们使用axios发送POST请求,并将`FormData`对象作为请求体。需要注意的是,我们需要设置`Content-Type`请求头为`multipart/form-data`,这样服务器才能正确地解析上传的文件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)