实践笔记——问题：axios上传文件参数为空

前言

写实践笔记的目的是：记录遇到的问题，并且从处理问题的过程中进行总结，最终形成方法论。

问题描述

使用axios进行文件上传时，出现参数为空的情况

解决过程

1. 网上寻找类似案例，结果方法众说云谈，没有有效的处理方案。

2. 冷静思考，从第一步中得到一些思路

（1）HTTP请求头content-type从application/json改为multipart/form-data；

（2）查看axios官方配置文档确认如何修改content-type

解决方法和知识

1. 了解content-type类型

定义：表示请求发送数据中的媒体类型信息。

写法：type/subtype(;parameter)，例如： Content-Type: text/html;charset:utf-8; 

1. type主类型，任意的字符串，如text，如果是*号代表所有；   
2. subtype 子类型，任意的字符串，如html，如果是*号代表所有；   
3. parameter 可选，一些参数，如charset参数。   

 常见的格式类型如下：

•     text/html ： HTML格式
•     text/plain ：纯文本格式      
•     text/xml ：  XML格式
•     image/gif ：gif图片格式    
•     image/jpeg ：jpg图片格式 
•     image/png：png图片格式
•    application/xhtml+xml ：XHTML格式
•    application/xml     ： XML数据格式
•    application/atom+xml  ：Atom XML聚合格式    
•    application/json    ： JSON数据格式
•    application/pdf       ：pdf格式  
•    application/msword  ： Word文档格式
•    application/octet-stream ： 二进制流数据（如常见的文件下载）
•    application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
•     multipart/form-data ： 需要在表单中进行文件上传时，就需要使用该格式

2.axios配置文档

http://www.axios-js.com/zh-cn/docs/#axios-config

config中要求使用data（因为multipart/form-data需要使用FormData类型）

3.最后处理

    let data = new FormData();
    // formData提交
    Object.keys(params).forEach(v => {
        data.append(v, params[v]);
    });
    return axios({
        method: 'post',
        url: `url`,
        data: data,
        headers: {
            'Content-Type': 'multipart/form-data;charset=UTF-8'
        }
    });