Vue3 实现文件上传功能

<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发送文件
      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发送文件
      axios.post('你的上传URL', formData, {
        headers: {
          'Content-Type': 'multipart/form-data' // 不需要显式设置，但为了清晰说明可以加上，因为默认就是这个类型。通常不需要手动设置。
        }
      })
      .then(response => {
        console.log('Success:', response.data); // 处理响应数据
      })
      .catch(error => {
        console.error('Error:', error); // 处理错误情况
      });
    }
  }
};
</script>

const express = require('express');
const multer = require('multer'); // 引入multer库来处理multipart/form-data请求。 你可以自定义存储路径等选项。 例如：mul