携程被指擅改行程：飞机延误 南非10日游变机

Use ref to access the file input because Vue doesn’t track files reactively; 2. Send the file via FormData to the backend, which automatically sets multipart/form-data headers when using axios; 3. For multiple files, add the multiple attribute and convert FileList to an array, appending each file to FormData; 4. Improve UX by showing file previews using URL.createObjectURL, validating type and size, and displaying upload status; 5. Ensure the backend accepts multipart/form-data and processes the correct field name, using tools like multer in Node.js for handling uploads—this approach combines Vue’s ref system with standard web APIs for reliable file uploads.

Handling file uploads in a Vue form is straightforward once you understand how to work with the File API and form data. Here’s a practical guide to help you implement file uploads in a Vue 3 application (Composition API), with key considerations for usability and backend compatibility.

? 1. Use ref to Access the File Input

Vue doesn’t track file inputs like text inputs because the files property is read-only. Instead, use a template ref to access the actual file(s) from the input.

<template>
  <form @submit.prevent="handleSubmit">
    <input
      type="file"
      ref="fileInput"
      @change="handleFileSelect"
      accept="image/*"
    />
    <p v-if="selectedFile">{{ selectedFile.name }}</p>
    <button type="submit">Upload</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';

const fileInput = ref(null);
const selectedFile = ref(null);

const handleFileSelect = () => {
  selectedFile.value = fileInput.value?.files[0] || null;
};
</script>

? @change is triggered when a file is selected. We store the first file in selectedFile.

? 2. Send File via FormData to Backend

Most backends expect file uploads via multipart/form-data. Use JavaScript’s FormData to package the file for sending with fetch or axios.

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const fileInput = ref(null);
const selectedFile = ref(null);
const isUploading = ref(false);

const handleFileSelect = () => {
  selectedFile.value = fileInput.value?.files[0] || null;
};

const handleSubmit = async () => {
  if (!selectedFile.value) return;

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

  try {
    const response = await axios.post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
    console.log('Upload successful:', response.data);
  } catch (error) {
    console.error('Upload failed:', error);
  } finally {
    isUploading.value = false;
  }
};
</script>

?? Always set 'Content-Type': 'multipart/form-data' — but note: axios handles this automatically when you use FormData, so you can usually omit the header.

? 3. Handle Multiple Files (Optional)

To allow multiple files, add the multiple attribute and loop through the file list:

<input
  type="file"
  ref="fileInput"
  @change="handleFileSelect"
  multiple
  accept="image/*"
/>

Update the handler:

const handleFileSelect = () => {
  const files = fileInput.value?.files;
  selectedFile.value = Array.from(files); // Convert FileList to array
};

Then append each file:

selectedFile.value.forEach(file => {
  formData.append('files[]', file); // Use array-style key if backend expects it
});

? 4. Add UX Improvements

• Show file name or thumbnail preview
• Validate file type and size before upload
• Display upload progress

Example: Image How to handle file uploads in a Vue form?

<img src="/static/imghw/default1.png"  data-src="previewUrl"  class="lazy"  v-if="previewUrl" : alt="How to handle file uploads in a Vue form?"   style="max-width:90%" />

const previewUrl = ref('');

const handleFileSelect = () => {
  const file = fileInput.value?.files[0];
  if (file) {
    selectedFile.value = file;
    previewUrl.value = URL.createObjectURL(file); // Create temporary URL
  }
};

? Remember to revoke the URL later if needed: URL.revokeObjectURL(previewUrl.value) after upload.

? 5. Backend Considerations

Make sure your backend (e.g., Node.js/Express, Django, Laravel) is set up to:

• Accept multipart/form-data
• Handle the field name (e.g., 'file' or 'files[]')
• Save or process the file appropriately

Example Express middleware: multer handles this well.

Summary

• Use ref to access the file input element
• Capture file(s) via event.target.files
• Use FormData to send to backend
• Set correct headers (or let axios do it)
• Improve UX with previews, validation, and loading states

Basically, Vue doesn’t manage file inputs reactively — so direct DOM access via ref is the cleanest way. The rest is standard web APIs and HTTP handling.

The above is the detailed content of How to handle file uploads in a Vue form?. For more information, please follow other related articles on the PHP Chinese website!