Vue で axios を使用して画像をアップロードするときに発生する問題

FormDataとは何ですか?

いろいろ検索して調べた結果、この魔法のようなものは、2008 年 2 月に提案された XMLHttpRequest Level 2 に追加された新しいオブジェクトだということがわかりました。これを使用して、フォームを送信したり、フォーム送信をシミュレートしたりできます。もちろん、最大の利点は、バイナリ ファイルをアップロードし、すべてのフォーム要素の名前と値を queryString に結合してバックグラウンドに送信できることです。

重要なポイント: すべてのフォーム要素の名前と値を queryString に結合し、バックエンドに送信できます。これはバックエンドがデータ形式を変換することを呼んでいるのではないですか? 形式に従って送信してください。フロントエンドとバックエンドの分離は非同期送信である必要があり、これによりこの問題を非常にうまく解決できます。

使い方もとても簡単です。フォームをパラメータとして FormData コンストラクターに渡すだけです。

vueとaxiosの協力による実践的な体験

<!--
    *. ここで使用する vue コンポーネントのアップロード コンポーネントは、buefy の vue コンポーネントです -->

<フォームメソッド="post" enctype="multipart/form-data">
    <b-field class="file is-primary" :class="{'has-name': !!file}">
        <b-upload v-model="file" class="file-label" @input="getModifyAvatar()">
            <span class="file-cta">
                <b-icon class="file-icon" icon="アップロード"></b-icon>
                <span class="file-label">クリックしてアップロード</span>
            </span>
            <span class="ファイル名" v-if="ファイル">
                {{ ファイル名 }}
            </span>                    
       </b-アップロード>
   </b-フィールド>
</フォーム>

<スクリプト>
    エクスポートデフォルト{
        データ（）{
            戻る {
                userInfo: '', // get リクエストを通じてユーザー関連情報を割り当てます file: null,
            }
        },
        メソッド: {
            // アバターを変更する getModifyAvatar(){
                フォームデータを作成します。
                //formData を構築します。data formData.append('avatar', this.file)
                // PUTリクエストを送信 getModifyInfo(formData).then(res => {
                    this.userInfo.avatar = res.data.avatar
                })
            },
        }
    }
</スクリプト>

// api.js
// これはカプセル化されたグローバルリクエストメソッドです import { request } from '../network/request'

// ユーザーアバターを変更する export const getModifyInfo = (params) => {
    リクエストを返す({
        URL: 've_register/1/',
        メソッド: 'put'、
        ヘッダー: { 'Content-Type': 'multipart/form-data' },
        データ:パラメータ
    })
}

上記のコードを見ると、リクエストを送信するときにリクエスト ヘッダーを設定する必要があることに注意してください。上記のように、HTML フォームで enctype="multipart/form-data" も設定する必要があります。そうしないと機能しません。

上記の例では、FormData の append() メソッドのみを使用しました。インターネット上の FormData に関する記事のほとんどは、append() メソッドのみについて言及しています。では、FormData オブジェクトにはどのようなメソッドがあるのでしょうか。実際、コンソールを使用するだけで確認できます。

コンソールの後には、重要な発見があります。FormData オブジェクトには非常に多くのメソッドがあるため、真実を知るには自分でテストする必要があります。以下では、これらのメソッドを 1 つずつ説明します。

追加()

append() メソッドは、FormData オブジェクトにキーと値のペアを追加するために使用されます。

fd.append('キー1'、"値1");
fd.append('キー2'、"値2");

fd は FormData オブジェクトであり、新しく作成された空のオブジェクト、またはフォームやその他のキーと値のペアが既に含まれたオブジェクトにすることができます。

セット（）

キーに対応する値を設定します

fd.set('キー1'、"値1");
fd.set('キー2'、"値2");

append() メソッドは多少似ています。2 つの違いは、指定されたキー値が存在する場合、append() メソッドは新しく追加されたすべてのキーと値のペアを末尾に追加するのに対し、set() メソッドは以前に設定されたキーと値のペアを上書きすることです。例と比較してみましょう。前の形式に基づいて、新しいキーと値のペアを append() または set() します。

fd.append('name',"will");

キー名を持つキーと値のペアが 2 つあります。

上記はappend()とset()の違いです。キー値が存在しない場合は、2 つの効果は同じになります。

消去（）

削除するキー値の名前を示すパラメータを受け取ります。同一のキー値が複数ある場合は、まとめて削除されます。

fd.append('名前','意志');
fd.delete('名前');

フォーム内の名前情報とappend()で追加された名前情報はすべて削除されます。

get() と getAll()

検索するキーの名前を示すパラメータを受け取り、キーに対応する最初の値を返します。同一のキーが複数ある場合は、このキーに対応するすべての値を返す必要があります。

上記のフォームに基づいて:

fd.append('名前','意志');
console.log(fd.get('name')); // ショーン

fd.append('名前','意志');
console.log(fd.getAll('name')); // ["ショーン", "ウィル"]

もっている（）

このメソッドは、キーの名前でもあるパラメータも受け取り、FormData オブジェクトにキーが含まれているかどうかを判断するために使用されるブール値を返します。上記のフォームを例に挙げます。

console.log(fd.has('name')); // 真
console.log(fd.has('Name')); // 偽

他のものは紹介しません。興味があれば、自分で検証してください。一度書いて、一度入力すれば、どんな記事を読むよりも実用的です！

上記の記事が役に立った場合は、私たちのオープンソース プロジェクトにスターを付けてください: github.crmeb.net/u/xingfu どうぞよろしくお願いいたします!

上記は、Vue で axios を使用して写真をアップロードする際に発生する問題の詳細です。Vue で axios を使用して写真をアップロードする方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。