Implementation code of custom file upload component in Vue

Implementation of custom file upload component in Vue

In the Vue project, creating a custom file upload component gives us better control over the interaction and appearance of file uploads. Below we will introduce how to implement it step by step.

1. Create component files

First, create a new file in the components directory of the Vue project. This file will be the core of our custom file upload component.

2. Component template structure

In the template part can be written like this:

<template>
  <div class="file-upload-container">
    <button @click="openFileDialog">{{ buttonText }}</button>
    <input
      ref="fileInput"
      type="file"
      @change="handleFileChange"
      style="display: none"
    />
  </div>
</template>

Here we create a container that contains buttons and hidden input (type="file"). The button is used to trigger the file selection dialog box. When clicking the button, the openFileDialog method will be called. The input change event binds the handleFileChange method to handle the operation after file selection.

3. Component script logic

Here I am

export default {
  name: 'FileUpload',
  data() {
    return {
      buttonText: 'Upload file',
      selectedFile: null
    };
  },
  methods: {
    openFileDialog() {
      this.$();
    },
    handleFileChange(e) {
      const file = [0];
      if (file) {
         = file;
        ('File selected:', );
        // Here you can perform subsequent file uploads or other related operations, such as sending them to the parent component for processing        this.$emit('file-selected', );
      }
    }
  }
};

In data, we define the text displayed by the button and the variables used to store the selected file. The openFileDialog method opens the file selection dialog box by triggering the click of input. The handleFileChange method gets the file selected by the user, stores it, and sends the file information to the parent component through $emit for further processing, such as a real upload operation.

4. Component style

Here I am

.file-upload-container {
  text-align: center;
}
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

This is just a simple style example where you can further beautify components according to the design requirements of the project.

5. Use custom files to upload components in other components

In the Vue component that needs to use file upload components:

<template>
  <div>
    <FileUpload @file-selected="handleUpload" />
  </div>
</template>
<script>
import FileUpload from './';
export default {
  components: {
    FileUpload
  },
  methods: {
    handleUpload(file) {
      // Process file upload here, such as sending to the server      ('Start uploading files:', file);
    }
  }
};
</script>

Through the above steps, we successfully created and used a custom file upload component in the Vue environment. This component not only allows customizing the appearance, but also conveniently interact with other components to realize file upload function. At the same time, in actual applications, more functions can also be added, such as file type limitation, upload progress display, etc.

This is the end of this article about the implementation of the custom file upload component in Vue. For more related contents of the vue custom file upload component, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!