Vueはアップロードコンポーネントを実装します

<フォーム 
  メソッド="投稿" 
  enctype="multipart/from-data"
  アクション="api/アップロード"
>
  <input type="ファイル名="ファイル">
  <button type="submit">送信</button>
</フォーム>

var formdata = new FormData(); // FormData オブジェクトを作成します formdata.append("name","laotie"); // append() メソッドを使用して新しい属性値を追加します... // その他の方法については、以下のリンクをクリックしてください

<input type="file" name="file" @change.prevent="handleFileChange">
// ファイルのアップロードをトリガーするファイルタイプの入力を作成します。後で入力を非表示にしてスタイルをカスタマイズできます。// スタイルをカスタマイズするときに、スロットを使用して、さまざまなアップロード状態 (読み込み中、成功、デフォルト) のスタイルを区別できます。

const handleFileChange = (e:Event)=>{
  const target = e.target を HTMLInputElement として
  const files = Array.from（target.files）// ここで取得されるのはクラス配列であることに注意してください if(files){
    // ファイルを取得する const uploadedFile = files[0]
    
    if(!validateFormat) 戻り値
    // ...これは単なる考え方であり、具体的な検証についてはここでは説明しません // ファイルをアップロードする前に、ファイル形式、サイズなどの検証を行ってください。
    // 要件を満たさない場合、それ以上のリクエストは送信されません const formData = new FormData()
    formData.append(アップロードされたファイル名、アップロードされたファイル)
    
    axios.post('/upload',formData,{
      ヘッダー:{
         // エンコード タイプ 'Content-Type': 'multipart/form-data' を設定することに注意してください
      }
    }).then(res=>{
      console.log('アップロード成功')
    }).catch(エラー =>{
      // ファイルのアップロードに失敗しました}).finally(()=>{
      // ファイルのアップロードが完了しました。成功か失敗かは関係ありません // ここで input.value をクリアできます
    })
  }
}

// アップロード.vue
<テンプレート>
  <div class="アップロードコンテナ">
    <div class="upload-box" @click.prevent="triggerUpload" v-bind="$attrs">
      <スロット名="読み込み中" v-if="fileStatus==='読み込み中'">
        <button class="btn btn-primary">アップロード中</button>
      </スロット>
      <スロット名="アップロード済み" v-else-if="fileStatus==='成功'" :uploadedData="ファイルデータ">
        <button class="btn btn-primary">アップロードに成功しました</button>
      </スロット>
      <スロット v-else name="default">
        <button class="btn btn-primary">クリックしてアップロード</button>
      </スロット>
    </div>
    <input type="file" class="file-input d-none" name="file" ref="uploadInput" @change="hanldeInput"/>
  </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent、ref、PropType、watch} をインポートします。
'axios' から axios をインポートします
タイプ UploadStatus = '準備完了' | '読み込み中' | '成功' | 'エラー'
タイプ FunctionProps = (file:File) => ブール値
エクスポートデフォルトdefineComponent({
  名前: 'アップロード'、
  継承属性: false、
  小道具: {
    // アップロードURL
    アクション： {
      タイプ: 文字列、
      必須: true
    },
    // アップロード前の検証、ブール値を返す関数 beforeUpload: {
      タイプ: Function as PropType<FunctionProps>
    },
    // アップロードされたデータ。ステータスの決定や表示の初期化に使用されます。uploadedData: {
      タイプ: オブジェクト
    }
  },
  出力: ['file-uploaded-success', 'file-uploaded-error'],
  セットアップ(props, ctx) {
    const uploadInput = ref<null | HTMLInputElement>(null)
    const fileStatus = ref<UploadStatus>(props.uploadedData ? '成功' : '準備完了')
    const ファイルデータ = ref(props.uploadedData)
    watch(() => props.uploadedData、(val) => {
      if (値) {
        fileStatus.value = '成功'
        ファイルデータ.値 = val
      }
    })
    const トリガーアップロード = () => {
      アップロード入力値の場合{
        アップロード入力値クリック()
      }
    }
    const hanldeInput = (e:Event) => {
      const target = e.target を HTMLInputElement として
      const ファイル = ターゲット.ファイル
      console.log(ターゲット)
      if (ファイル) {
        const uploadFile = Array.from(ファイル)
        定数validateFormat = props.beforeUpload ? props.beforeUpload(uploadFile[0]) : true
        if (!validateFormat) 戻り値
        fileStatus.value = '読み込み中'
        const フォームデータ = 新しいフォームデータ()
        formData.append('ファイル', uploadFile[0]) を追加します。
        axios.post(props.action, フォームデータ, {
          ヘッダー: {
            'コンテンツタイプ': 'マルチパート/フォームデータ'
          }
        }).then(res => {
          console.log('ファイルが正常にアップロードされました', res)
          fileStatus.value = '成功'
          ファイルデータ.値 = res.data
          ctx.emit('ファイルのアップロード成功', res.data)
        }).catch(エラー => {
          console.log('ファイルのアップロードに失敗しました', エラー)
          fileStatus.value = 'エラー'
          ctx.emit('ファイルアップロードエラー', エラー)
        }).finally(() => {
          console.log('ファイルのアップロードが完了しました')
          アップロード入力値の場合{
            アップロード入力値.value = ''
          }
        })
      }
    }

    戻る {
      アップロード入力、
      トリガーアップロード、
      ハンドル入力、
      ファイルステータス、
      ファイルデータ
    }
  }
})
</スクリプト>

<テンプレート>
  <div class="投稿ページを作成">
    <アップロード
      アクション="/アップロード"
      :beforeUpload="アップロード前"
      :uploadedData="アップロードされたデータ"
      @file-uploaded-success="アップロード成功"
      クラス="d-flex align-items-center justify-content-center bg-light text-secondary w-100 my-4"
      >
      <テンプレート #uploaded="slotProps">
        <div class="アップロードされたエリア">
          <img :src="slotProps.uploadedData.data.url"/>
          <h3>クリックして再アップロード</h3>
        </div>
       </テンプレート>
       <テンプレート #デフォルト>
         <h2>クリックしてヘッダー画像をアップロード</h2>
       </テンプレート>
       <テンプレート #読み込み中>
         <div class="d-flex">
          <div class="spinner-border text-secondary" role="status">
            <span class="sr-only"></span>
          </div>
         </div>
       </テンプレート>
    </アップロード>
  </div>
</テンプレート>
<script lang="ts">
'vue' から {defineComponent、ref、onMounted} をインポートします。
'../components/Upload.vue' からアップロードをインポートします。
'../components/createMessage' から createMessage をインポートします。

エクスポートデフォルトdefineComponent({
  名前: 'CreatePost',
  コンポーネント: { アップロード },
  設定（） {
    const uploadedData = ref() //レスポンシブデータを作成する let imageId = ''
    マウント時(() => {
      ....
      // ここではロジックは省略し、初期化データイメージを取得します
      if (画像) {
        uploadedData.value = { データ: 画像 }
      }
    })
    // アップロード前に検証し、ブール値を返します const beforeUpload = (file:File) => {
      const res = beforeUploadCheck(ファイル、{
        フォーマット: ['image/jpeg', 'image/png'],
        サイズ: 1
      })
      const { エラー、合格 } = res
      if (エラー === 'フォーマット') {
        createMessage('アップロードできる画像は JPG/PNG 形式のみです!', 'error')
      }
      if (エラー === 'サイズ') {
        createMessage('アップロードされた画像のサイズは 1MB を超えることはできません', 'error')
      }
      返品は合格しました
    }
    // アップロードが成功したら、フォームの作成などの後続の処理のために imageId を取得できます。const hanldeUploadSuccess = (res:ResponseProps<ImageProps>) => {
      createMessage(`画像ID ${res.data._id} をアップロード`, '成功')
      （res.data._id）の場合{
        画像ID = res.data._id
      }
    }
    戻る {
      アップロード前、
      アップロード成功、
      アップロードされたデータ
    }
  }
})
</スクリプト>
<スタイル>
.投稿ページを作成する{
  パディング:0 20px 20px;
}
.投稿ページを作成 .アップロードボックス{
  高さ:200px;
  カーソル: ポインタ;
  オーバーフロー: 非表示;
}
.create-post-page .upload-box img{
  幅: 100%;
  高さ: 100%;
  オブジェクトフィット: カバー;
}
.アップロードされたエリア{
  位置: 相対的;
}
.uploaded-area:hover h3{
  表示: ブロック;
}
.アップロードエリア h3{
  表示: なし;
  位置: 絶対;
  色: #999;
  テキスト配置: 中央;
  幅: 100%;
  トップ:50%
}
</スタイル>