transformRequestとtransformResponseの役割

ファイルのアップロードを忘れないでください。リクエストヘッダーとシリアル化パラメータをリセットします。ファイルストリームのアップロードに便利です。

1.transformRequestとtransformResponseの役割

transformRequest:
リクエストデータをサーバーに送信する前に変更できます。これはリクエストメソッド put、post、patch にのみ適用されます。値が配列の場合、配列内の最後の関数は文字列または FormData、URLSearchParams を返す必要があります。、Blob およびその他の型は xhr.send メソッドのパラメーターとして使用され、ヘッダーオブジェクトは変換プロセス中に変更できます。

transformResponse :
応答データを then または catch に渡す前に変更できます。
値が配列の場合、配列の各関数は変換関数となり、配列内の関数がパイプラインのように順次実行され、前者の出力が後者の入力として使用されます。

例えば：

axios({
    
    
  transformRequest: [(function(data) {
    
    
    return qs.stringify(data)
  }), ...axios.defaults.transformRequest],
  transformResponse: [axios.defaults.transformResponse, function(data) {
    
    
    if (typeof data === 'object') {
    
    
      data.b = 2
    }
    return data
  }],
  url: '/config/post',
  method: 'post',
  data: {
    
    
    a: 1
  }
})

2. リクエストヘッダーとシリアル化パラメータをリセット – ファイルストリームのアップロードに便利

axios のファイルアップロードに関しては、ファイルアップロードのリクエストヘッダやパラメータの形式が異なるため、全体に影響を与えないように axios を個別にパッケージ化する必要がある場合があります。
フロントエンドがデータをバックグラウンドに送信する場合、get リクエストと post リクエストが最も頻繁に使用され、データ形式は通常 JSON 形式になります。
axios の post リクエストを例に挙げます (get リクエストの通常の操作は問題なく、基本的には問題ありません)。

axios.post(url, {
    
    name:1111,get:22323})
.then(res => {
    
    })
.catch(err => {
    
    })

何も問題がないようですが、送信された本文が間違っています。
ここに画像の説明を挿入
バックエンドは formData 型を必要としていますが、バックエンドがそれを受信できないため、axios を次のようにグローバルに設定する必要があります。

// 设置get,post请求头Content-Type为form,注意：大部分场景都适用，但文件上传需另外处理
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
// 设置请求头后需使用拦截器处理下参数序列化成URL的形式
axios.defaults.transformRequest = [function (data) {
    
    
    let ret = ''
    for (let it in data) {
    
    
      ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
    }
    return ret
}]

上記の処理が完了した後、再度リクエストを行うと、次のようになります。
ここに画像の説明を挿入
でもこれは形だけです, ファイルのアップロードについてはどうでしょうか？ファイルをリクエストするときは、次のようにファイル file を formData オブジェクトに入れる必要があります。

let params = new FormData(); //创建form对象
params.append("file", file.file);

以下の図に示すように、上記の file.file は、アップロードされたファイルのオブジェクトプロパティです。各アップロードコンポーネントの戻りパラメータが異なるため、ここではあまり説明しません。とにかく、下図のファイルオブジェクトを FormData インスタンスに追加する必要があります。最初の追加パラメータは名前です。任意に選択できますが、次の目的が一貫しているため、同じである必要があります。
ここに画像の説明を挿入
ファイルのアップロードリクエストを開始します。

axios.post(url, params) // url 请求地址，params formdata实例
.then(res => {
    
    })
.catch(err => {
    
    })

要求された情報は次のとおりです。
ここに画像の説明を挿入
馬に乗っているのは一体何だ、違和感がある。ネイティブ Ajax の正しいファイルアップロード情報を確認してください。

次のようになっているはずなので、Baidu にアクセスします。インターネット上では、リクエストヘッダーの Content-type が multipart/form-data に設定されていると言われています。

動作する場合は、デフォルトの axios 構成がグローバルに設定されているため、セットアップに進みます。したがって、 axios.create() を使用して、ファイルのアップロードを使用する必要がある axios インスタンスを再作成します。

let newAxios = axios.create({
    
    
    headers: {
    
    'Content-Type': 'multipart/form-data;charset=utf-8'}
});
newAxios.post(url, params).then(res => {
    
    
    console.log(res);
});

投稿リクエストをもう一度送信します。
ここに画像の説明を挿入
これは一体何ですか、まだ間違っているように感じます。Baidu に続けて、axios が formdata を認識し、content-type を削除してブラウザが独自に作成できるようにするという投稿があります。ブラウザは、boundary=----WebKitFormBoundary6VWEnKLH8GsMFw0W のような文字列を自動的に作成するためです。とにかく、私はそうではありませんでした。わかりません。最も重要な点は、グローバルに構成されたインターセプターが formdata パラメーターを URL にシリアル化することです。確かに、この構成は以前に行われましたが、ファイル以外のアップロードの場合があるため、グローバルに変更することはできません。したがって、上記のコードに別のインターセプターを追加し、fmultipart/form-data の content-type をシリアル化しないでください。データを直接返します。

let newAxios = axios.create({
    
    
    headers: {
    
    'Content-Type': 'multipart/form-data;charset=utf-8'}
});
newAxios.defaults.transformRequest = [function (data, config) {
    
    
    switch (config['Content-Type'].toLowerCase()) {
    
    
        case 'multipart/form-data;charset=utf-8':{
    
    
            return data;
        }
    }
}]


newAxios.post(url, params).then(res => {
    
    
    console.log(res);
});

完了後にリクエストを送信します。
ここに画像の説明を挿入
これが希望する結果になります。もちろん、コードの保守性を高めるために、上記のコードをグローバル構成で抽出して処理することもできます。

ファイルをアップロードするためのインターフェイスリクエストを単純にカプセル化します。

import axios from 'axios';
let newAxios = axios.create({
    
    
    headers: {
    
    'Content-Type': 'multipart/form-data;charset=utf-8'}
});
newAxios.defaults.transformRequest = [function (data, config) {
    
    
    switch (config['Content-Type'].toLowerCase()) {
    
    
        case 'multipart/form-data;charset=utf-8':{
    
    
            return data;
        }
    }
}]

function upload(url, formdata) {
    
    
    let promise;
    return new Promise((resolve, reject) => {
    
    
        promise = newAxios.post(url, formdata);
        promise.then((response) => {
    
    
            resolve(response.data);
        }).catch(error => {
    
    
            reject(error);
        })
    })
}

var globalUrl = "http://192.168.5.132:8080/"; // 地址可以改成自己项目中的地址

// 接口列表，供其它页面调用使用，如还有其它上传接口，可复制一份改下接口地址根函数名就行
export const uploadFile = (formdata) => upload(globalUrl + 'oa/fileInfo/uploadFile', formdata);

他のページ呼び出しでは以下が使用されます。

// 引入调用接口
import {
    
     uploadFile } from '../../api/fileupload';

let params = new FormData(); //创建form对象
params.append("file", file.file);
// 直接传入参数
uploadFile(params)
    .then(res => {
    
    
    // 后台返回的状态码，自行根据后台的要求进行修改
    if (res.code == 200) {
    
    
        console.log(res);   
    }
});