Vue 使用 Axios 上传图片进度提示

2023-12-06 14:36:39

欢迎来到我的技术博客。今天，我想与你分享如何使用 Vue.js 和 Axios 库上传图片并显示进度提示。这在用户需要上传大量图片或文件时非常有用，因为它可以让他们了解上传进度，避免不必要的等待。

在 Vue.js 项目中实现图片上传进度提示

1. 创建 Vue 组件

首先，我们需要创建一个新的 Vue 组件来处理图片上传。这个组件将负责显示图片上传表单、处理上传请求以及更新进度条。

// src/components/ImageUploader.vue

<template>
  <div>
    <form @submit.prevent="onSubmit">
      <input type="file" @change="onFileChange">
      <button type="submit">Upload</button>
    </form>

    <div v-if="progress">
      <progress :value="progress" max="100"></progress>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      file: null,
      progress: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    onSubmit() {
      const formData = new FormData();
      formData.append("image", this.file);

      axios
        .post("/api/upload", formData, {
          onUploadProgress: (progressEvent) => {
            this.progress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        })
        .then((response) => {
          // Handle successful upload
        })
        .catch((error) => {
          // Handle upload error
        });
    },
  },
};
</script>