用axios调用api的方式实现文件上传
时间: 2023-05-31 18:05:25 浏览: 43
可以使用FormData对象来实现文件上传,并且可以将FormData对象作为参数传递给axios的POST请求。
以下是示例代码:
```javascript
// 创建FormData对象
const formData = new FormData();
// 添加文件到FormData对象
formData.append('file', file);
// 发送POST请求
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
```
其中,`file`是一个文件对象,可以通过文件选择器或拖拽文件的方式获取。`/api/upload`是上传文件的API接口地址。
需要注意的是,需要在请求头中设置`Content-Type`为`multipart/form-data`,以告知服务器这是一个文件上传请求。
相关问题
用axios调用api的方式通过el-upload实现文件上传
1. 首先安装axios和element-ui:
```
npm install axios element-ui --save
```
2. 在需要使用el-upload组件的页面中,引入axios和element-ui:
```javascript
import axios from 'axios'
import { Upload, MessageBox } from 'element-ui'
```
3. 在template中使用el-upload组件:
```html
<el-upload
class="upload-demo"
action="/api/upload"
:on-change="handleUpload"
:before-upload="beforeUpload"
:headers="headers"
:data="uploadData"
:auto-upload="false"
:file-list="fileList"
:on-remove="handleRemove"
:on-success="handleSuccess"
:on-error="handleError"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="upload">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
```
其中,action属性指定了上传文件的api地址;before-upload属性指定了上传文件前的校验函数;headers属性和data属性分别指定了请求的header和请求的参数;auto-upload属性设置为false,表示不自动上传文件;file-list属性绑定了已上传的文件列表;on-remove、on-success和on-error分别指定了文件移除、上传成功和上传失败的回调函数。
4. 在methods中添加上传文件的相关函数:
```javascript
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
const isLt500k = file.size / 1024 < 500;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
}
if (!isLt500k) {
this.$message.error('上传头像图片大小不能超过 500KB!');
}
return isJPG && isLt500k;
},
handleUpload() {
// 当上传文件列表发生变化时调用
},
upload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
// 当文件列表中的某个文件被移除时调用
},
handleSuccess(res, file, fileList) {
// 当文件上传成功时调用
},
handleError(err, file, fileList) {
// 当文件上传失败时调用
}
}
```
5. 在handleSuccess函数中发起axios请求:
```javascript
handleSuccess(res, file, fileList) {
if (res.code === 0) {
this.$message.success('上传成功');
// 上传成功后,将文件信息添加到fileList中
const { id, name, url } = res.data;
fileList[fileList.length - 1].id = id;
fileList[fileList.length - 1].name = name;
fileList[fileList.length - 1].url = url;
} else {
this.$message.error('上传失败');
}
},
```
在这个函数中,我们判断了上传结果的code,如果为0则表示上传成功,将文件信息添加到fileList中;否则表示上传失败,弹出提示信息。
6. 在created生命周期函数中设置请求header:
```javascript
created() {
this.headers = {
Authorization: `Bearer ${localStorage.getItem('token')}`
};
}
```
在这里,我们将请求header设置为包含Authorization字段的对象,其值为从localStorage中获取的token。
7. 在methods中定义上传文件的函数:
```javascript
upload() {
this.$refs.upload.submit();
}
```
该函数调用了el-upload组件的submit方法,用于上传文件。
8. 最后,在methods中定义handleUpload函数:
```javascript
handleUpload() {
// 获取上传文件列表
const files = this.$refs.upload.uploadFiles;
// 遍历上传文件列表,发起axios请求
files.forEach(file => {
const formData = new FormData();
formData.append('file', file.raw);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
Authorization: `Bearer ${localStorage.getItem('token')}`
},
onUploadProgress: (progressEvent) => {
// 显示上传进度条
const percent = Math.floor((progressEvent.loaded / progressEvent.total) * 100);
this.$set(file, 'percentage', percent);
}
}).then(res => {
if (res.code === 0) {
this.$message.success('上传成功');
// 上传成功后,将文件信息添加到fileList中
const { id, name, url } = res.data;
this.fileList.push({
id,
name,
url
});
} else {
this.$message.error('上传失败');
}
}).catch(err => {
this.$message.error('上传失败');
});
});
}
```
在这个函数中,我们获取上传文件列表,遍历上传文件列表,发起axios请求,将文件信息添加到fileList中。同时,我们通过设置onUploadProgress回调函数,实时更新上传进度条。
文件上传的api用axios怎么写
使用 Axios 上传文件的关键在于设置请求头和数据格式,可以参考以下示例代码:
```js
// 创建一个 FormData 对象
const formData = new FormData();
formData.append('file', file);
// 发送 POST 请求
axios.post('/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then((response) => {
// 处理响应结果
console.log(response.data);
}).catch((error) => {
// 处理错误
console.error(error);
});
```
其中,`file` 是要上传的文件对象,`/upload` 是上传文件的 API 地址。在请求头中指定了 `Content-Type` 为 `multipart/form-data`,以便服务器正确地解析数据。使用 Promise 链式调用 `then` 和 `catch` 方法处理响应和错误。