要点:
1、使用change事件,保存上传文件的参数对象,进而将该参数对象添加到下述的FormData对象中,详见代码如下:
<input type="file" class="uploadFile" @change="getFile($event)"><!-- 这里$event表示原生的 DOM 事件 -->
getFile: function(event) { this.file = event.target.files[0]; }
//将上传文件的参数对象 保存到 组件的data属性对象(其中的file属性)中。
2、创建FormData对象将POST要携带的参数编译成键值对,POST请求的携带参数是FormData对象,详见代码如下:
let formData = new FormData();formData.append("name", this.name);
formData.append("file", this.file);
3、发送axios请求,流程是创建axios实例 => 传递参数并调用axios实例,详见代码如下:
//创建axios实例const service = axios.create({ baseURL: 'http://10.16.18.110:8001/', timeout: 5000,})
//调用实例并传入参数
service({
url: '/check',
method: 'post',
headers: { "Content-Type": "multipart/form-data" },
data:formData
})
.then(res => {
if res.status == 200{
//如果成功响应,则执行以下代码
}})
.catch(error => {
//捕捉错误
})