<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="submitFile">上傳文件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]; // 獲取第一個文件
    },
    submitFile() {
      if (!this.selectedFile) {
        alert('請選擇一個文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.selectedFile); // 將文件添加到FormData對象中
      // 使用fetch API發(fā)送文件
      fetch('你的上傳URL', {
        method: 'POST',
        body: formData,
      })
      .then(response => response.json())
      .then(data => {
        console.log('Success:', data);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
    }
  }
};
</script>

npm install axios

<script>
import axios from 'axios';
export default {
  data() {
    return {
      selectedFile: null,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0]; // 獲取第一個文件
    },
    submitFile() {
      if (!this.selectedFile) {
        alert('請選擇一個文件');
        return;
      }
      const formData = new FormData();
      formData.append('file', this.selectedFile); // 將文件添加到FormData對象中
      // 使用axios發(fā)送文件
      axios.post('你的上傳URL', formData, {
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要顯式設(shè)置，但為了清晰說明可以加上，因為默認(rèn)就是這個類型。通常不需要手動設(shè)置。
        }
      })
      .then(response => {
        console.log('Success:', response.data); // 處理響應(yīng)數(shù)據(jù)
      })
      .catch(error => {
        console.error('Error:', error); // 處理錯誤情況
      });
    }
  }
};
</script>

const express = require('express');
const multer = require('multer'); // 引入multer庫來處理multipart/form-data請求。 你可以自定義存儲路徑等選項。 例如：mul