SoFunction
Updated on 2025-04-12

Vue uses Vue Elements to implement file preview function

1. Preface

In modern web development, the user-system interaction experience is becoming increasingly important, and file upload and file preview are one of the most common interaction scenarios. Especially in some enterprise applications and content management systems, the functions of uploading, displaying and deleting files occupy a very important position.

As a progressive JavaScript framework, it is widely used in front-end development due to its simplicity, flexibility and powerful features. In order to facilitate Vue developers to handle common tasks such as file preview, many third-party component libraries have emerged, among which Vue Elements is a tool that can help developers quickly implement file preview functions.

This article will introduce in detail how to use Vue Elements in Vue projects to implement file preview functions, including basic usage methods, common instances, performance optimization, and style customization.

2. Vue Elements Overview

Vue Elements is a modern UI component library based on development, designed to provide efficient and easy-to-scaling Vue components to help developers quickly build high-quality applications. Its core idea is to simplify the development process, reduce duplicate code, and improve maintainability. Vue Elements provides a number of UI components, including but not limited to:

  • File Upload Component
  • Form input component
  • Data table
  • File Preview Component
  • Dialog Components
  • Form Verification Component

Among them, the file preview function is a very practical component provided by Vue Elements. It can help users easily view various types of files on the page, including pictures, PDF documents, audio and video files, etc.

III. Installation and configuration

3.1 Install Vue Elements

First, you need to install it in the projectVue ElementsRelated dependencies. byvue-file-agentAs an example, this is a widely used file upload and preview component that supports various types of file upload and preview functions.

  • Install vue-file-agent

Open the terminal in your project directory and run the following command to install itvue-file-agent：

npm install vue-file-agent

Or if you are usingyarn：

yarn add vue-file-agent
  • Install style files

In addition to installing the Vue component itself, it is also necessary to introduce the component's style files. Can be in yourorIntroduced into the filevue-file-agentCSS file:

import 'vue-file-agent/dist/';

3.2 After the installation is completed, you can use the VueFileAgent component in the Vue component.

4. Basic instructions for use

4.1 File selection and preview

Here is an example of the most basic file upload and preview implementation:

<template>
  <div>
    <!-- File selection component -->
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="5000000"  <!-- Maximum file size：5MB -->
      :allow-multiple="true"  <!-- Is it supported to select multiple files? -->
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], // Used to store selected files    };
  },
};
</script>

<style scoped>
/* Custom style */
</style>

In this example,vue-file-agentThe component provides the following functions:

  • v-model="files": Array used to bind a file list. When the user selects a file, the file object will be stored infilesmiddle.
  • :show-preview="true": Enable file preview function.
  • :max-size="5000000": Set the maximum size of file upload to 5MB.
  • :allow-multiple="true": Allow users to upload multiple files at once.

5. File type support

VueFileAgentThe preview of multiple file types is supported by default, including pictures, videos, audio and documents, etc., as follows:

  • Picture files(such as PNG, JPG, JPEG, GIF, SVG, etc.):
    For picture files,vue-file-agentA thumbnail will be automatically generated and displayed on the page.

  • PDF File：
    For PDF files,vue-file-agentThe PDF reader will be automatically embedded, allowing users to view the content of the PDF file.

  • Document file(such as Word, Excel, etc.):
    For common document formats such as Word and Excel,vue-file-agentIt will provide basic information about file name and size, and allow users to download files.

  • Audio and video files：
    Supports common audio and video formats such as MP4 and MP3, and can be played through a built-in player.

5.1 Picture file preview

For picture files,vue-file-agentA preview image will be automatically generated, the examples are as follows:

<template>
  <div>
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="5000000"
      :allow-multiple="true"
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], //Storage picture files    };
  },
};
</script>

In this example, the image uploaded by the user will be displayed on the page, supporting the image preview function.

5.2 PDF file preview

For PDF files,vue-file-agentThe PDF reader will be automatically embedded in the browser for preview. Examples are as follows:

<template>
  <div>
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="5000000"
      :allow-multiple="true"
      :accepted-file-types="['application/pdf']"
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], //Storage PDF files    };
  },
};
</script>

5.3 Audio and video file preview

For audio and video files,vue-file-agentThe corresponding player will be embedded according to the file type. Examples are as follows:

<template>
  <div>
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="10000000"
      :allow-multiple="true"
      :accepted-file-types="['audio/*', 'video/*']"
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], //Storage audio and video files    };
  },
};
</script>

6. File upload and deletion

6.1 File Deletion

pass@deleteEvents, you can listen to file deletion operations and execute custom logic when deleting.

<template>
  <div>
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="5000000"
      :allow-multiple="true"
      @delete="handleDelete" <!-- Listen to delete events -->
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], //Storage files    };
  },
  methods: {
    handleDelete(file) {
      ('Delete file:', file);
      // Other processing of file deletion can be performed here    },
  },
};
</script>

6.2 File upload

Upload operations usually interact with server-side APIs. You can use Vue'saxiosorfetchAPI uploads files to the server.

<template>
  <div>
    <vue-file-agent
      v-model="files"
      :show-preview="true"
      :max-size="5000000"
      :allow-multiple="true"
      @file-change="handleFileChange" <!-- Triggered when file selection changes -->
    />
  </div>
</template>

<script>
import { VueFileAgent } from 'vue-file-agent';
import axios from 'axios'; // Introduce axiosimport 'vue-file-agent/dist/';

export default {
  components: {
    VueFileAgent,
  },
  data() {
    return {
      files: [], //Storage files    };
  },
  methods: {
    async handleFileChange(files) {
      // Upload file      const formData = new FormData();
      ((file) => {
        ('files[]', ); // Add file to FormData
 middle
      });

      try {
        const response = await ('/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        });
        ('File upload successfully:', );
      } catch (error) {
        ('File upload failed:', error);
      }
    },
  },
};
</script>

7. Performance optimization of file preview

When there are many files or large files, file preview may have a certain impact on performance. Here are some suggestions for performance optimization:

  1. Lazy loading: Use lazy loading technology for file preview areas, and the corresponding preview is only loaded when the user scrolls to the file.
  2. File compression: For large files, you can compress the files before uploading to reduce the file size and improve the loading speed.
  3. Suitable preview size: For file types such as pictures, the size of the preview image can be controlled to avoid excessive loading of images that affect performance.
  4. Optimize file type limitations: Avoid unnecessary file preview by limiting supported file types.

8. Summary

This article introduces in detail the file preview functions in Vue Elements, including how to install and use the VueFileAgent component, how to handle previews of different types of files such as pictures, documents, audio and video, and how to upload and delete files. At the same time, this article also introduces best practices for performance optimization to help developers achieve more efficient and flexible file upload and preview functions in actual projects.

By flexibly using these technologies, developers can easily implement file preview functions in Vue projects and improve user experience.

The above is the detailed content of Vue using Vue Elements to implement file preview function. For more information about Vue Elements file preview, please pay attention to my other related articles!