Flask|axios使用|Get请求|Post请求|文件上传|base64

文章目录

1. axios

axios 默认的 Content-Type 请求头是：Content-Type: application/json

例如 post 请求中 axios 默认提交的 data 就是 json 数据
这里需要注意的是，jQuery 的默认 Content-Type 请求头是：Content-Type: application/x-www-form-urlencoded

如果项目是从 jQuery 转到 axios 上，需要在 axios 上做 Content-Type 的处理

axios.post({
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
    .then(function (response) {
        console.log(response);
    })

2. get 请求

axios 的 get 请求：

axios({
    method:'get',
    url:'tpls/',
    params: {
        ID: 12345
    }
})
    .then(function (response) {
        console.log(error);
    });

axsio 的别名写法：

axios.get('/tpls?ID=12345')
    .then(function (response) {
        // handle success
        console.log(response);
    })
    .catch(function (error) {
        // handle error
        console.log(error);
    })
    .then(function () {
        // always executed
    });
  
// or
  
axios.get('/tpls', {
    params: {
    ID: 12345
    }
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    })
    .then(function () {
        // always executed
    });

如果请求的是图片流，如下：

axios({
    method:'get',
    url:'tpls/img',
    responseType:'stream'
})
    .then(function (response) {
        response.data.pipe(fs.createWriteStream('detail.jpg'))
    });

3. Flask 的 get 请求处理

3.1 获取到单个的值

request.args.get('key')

3.2 获取get请求的所有参数

获取get请求的所有参数返回值是ImmutableMultiDict类型

requestValues = request.args

3.3 将获得的参数转换为字典

requestValues.to_dict()

4. axios 进行 post 请求：

json 的 post 请求

axios({
    method: 'post',
    url: 'tpls/submit',
    data: {
        name: 'alma',
        edu: {shcool: 'MIT', age: '20'}
    }
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

axios 别名的写法：

axios.post('tpls/submit', {
        name: 'alma',
        edu: {shcool: 'MIT', age: '20'}
    })

不做 response 的处理也是可以的

flask 这边这样接受请求，以及 return 一个 response：

@app.route('tpls/submit', methods=['POST'])
def submit():
    anchor = request.json
    print(anchor.get('name'))
    return 'response'

也就是说，flask 拿到的 json 数据直接变成了 dict 类型，可以方便的使用

4. Flask 几种获取 json data 的方式

Ajax 请求不来源于 form 提交，flask 的 request.form 是拿不到数据的，只能通过以下几种方式拿到数据：

获取未经处理过的原始数据而不管内容类型,如果数据格式是json的，则取得的是json字符串，排序和请求参数一致

request.get_data()

以 get_data() 拿到的数据，将会变成 bytes 对象，如：

b'{'name': 'alma'}'

此时需引入 json 模块，再次重新将其以 json 形式转为 dict（如果 data 是 json）：

json.loads(request.get_data())

将请求参数做了处理，得到的是字典格式的，因此排序会打乱依据字典排序规则

request.get_json()

可以获取未经处理过的原始数据，如果数据格式是json的，则取得的是json字符串，排序和请求参数一致

request.data

将请求参数做了处理，得到的是字典格式的，因此排序会打乱依据字典排序规则

request.json

这几种方式就好得多，拿过来就是 dict，直接用

5. 文件上传的 post 请求

html 创建 input file，比如：

<input name="file" type="file" accept="image/png,image/gif,image/jpeg" id="imgFile"/>

封装一个 FormDate 对象，然后请求头使用Content-Type: ‘multipart/form-data’：

let file = e.target.files[0];
let param = new FormData();
param.append('pic_file', file, file.name);

axios({
    method: 'post',
    url: 'tpls/submit',
    headers: {'Content-Type': 'multipart/form-data'},
    data: param
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });