vue3+ts实现文件上传

vue3+ts上传文件

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
    <button @click="uploadFile">Upload</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const fileInput = ref<HTMLInputElement | null>(null);
let selectedFile: File | null = null;

const handleFileUpload = () => {
  if (fileInput.value && fileInput.value.files) {
    selectedFile = fileInput.value.files[0];
  }
};

const uploadFile = async () => {
  if (!selectedFile) {
    console.error("No file selected.");
    return;
  }

  const formData = new FormData();
  formData.append('file', selectedFile);

  try {
    const response = await axios.post('/upload/file', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('File uploaded successfully:', response.data);
  } catch (error) {
    console.error('Error uploading file:', error);
  }
};
</script>

• <input type="file"> 用于选择文件。
• handleFileUpload 方法用于监听文件选择事件，并将选定的文件存储在 selectedFile 中。
• uploadFile 方法用于实际的文件上传操作。它创建一个 FormData 对象，将选定的文件附加到其中，然后使用axios来将文件上传到后端。
• 在axios的请求配置中，设置了请求头为 “multipart/form-data”，以确保正确地处理文件上传。