JavaScriptを使い、multipart/form-dataでファイルをアップロードする

概要

JavaScriptを使い、multipart/form-dataでファイルをアップロードする。

実装

※書き方が一部Reactになっているので読み替えてください

HTML側

<input type="file" accept=".png,.jpg" onChange={this.handleUpload} >

inputタグからファイルが選択された際にデータを格納する部分

handleUpload = e => {
    const target = e.target.files[0];
    // ファイル選択→キャンセル押下でundefinedがくるのでその対応
    if (target === undefined) { return; }
    this.data = target; // this.dataはデータを格納する先なら何でも可（thisじゃなくていい）
}

実際にデータをアップロードする部分（handleUpload()が実行されている前提）

doUpload = async () => {
    let form = new FormData();
    form.append('image', this.data); // 'image'は multipart の name
    
    try {
        const res = await axios.post(url, form);
        // 以降は必要な事後処理を書くこと
    catch (error) {
        // 異常系
        console.error(error)
    }
}

参考

• MDN
• [フロントエンド] multipart/form-dataを理解してみよう
• JavaScriptを使い、ファイルをアップロードする