Vue+Axios实现文件上传自定义进度条

Vue+Axios实现文件上传自定义进度条攻略

1. 安装依赖

首先，我们需要安装Vue和Axios的依赖包。在项目根目录下打开终端，执行以下命令：

npm install vue axios

2. 创建Vue组件

在Vue项目中，我们需要创建一个组件来处理文件上传和显示进度条。在你的Vue项目中的组件文件夹中创建一个新的组件文件，比如FileUpload.vue。

<template>
  <div>
    <input type=\"file\" @change=\"handleFileUpload\" />
    <button @click=\"uploadFile\">上传</button>
    <div v-if=\"uploadProgress > 0\">
      <progress :value=\"uploadProgress\" max=\"100\"></progress>
      <span>{{ uploadProgress }}%</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
      uploadProgress: 0,
    };
  },
  methods: {
    handleFileUpload(event) {
      this.file = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      axios
        .post('/upload', formData, {
          onUploadProgress: (progressEvent) => {
            this.uploadProgress = Math.round(
              (progressEvent.loaded / progressEvent.total) * 100
            );
          },
        })
        .then((response) => {
          // 处理上传成功的逻辑
        })
        .catch((error) => {
          // 处理上传失败的逻辑
        });
    },
  },
};
</script>

3. 示例说明

示例1：上传图片文件

假设我们要上传一张图片文件，可以在Vue组件中使用FileUpload组件来实现。在父组件中引入FileUpload组件，并使用它：

<template>
  <div>
    <h1>上传图片</h1>
    <FileUpload />
  </div>
</template>

<script>
import FileUpload from './FileUpload.vue';

export default {
  components: {
    FileUpload,
  },
};
</script>

示例2：上传文本文件

如果我们要上传一个文本文件，可以在FileUpload组件中添加一个文件类型的选择框，让用户选择要上传的文件类型。修改FileUpload组件的模板部分：

<template>
  <div>
    <input type=\"file\" @change=\"handleFileUpload\" />
    <select v-model=\"fileType\">
      <option value=\"image\">图片</option>
      <option value=\"text\">文本</option>
    </select>
    <button @click=\"uploadFile\">上传</button>
    <div v-if=\"uploadProgress > 0\">
      <progress :value=\"uploadProgress\" max=\"100\"></progress>
      <span>{{ uploadProgress }}%</span>
    </div>
  </div>
</template>

然后，在uploadFile方法中根据选择的文件类型来设置请求的URL：

uploadFile() {
  const formData = new FormData();
  formData.append('file', this.file);

  let url = '/upload';
  if (this.fileType === 'image') {
    url = '/upload/image';
  } else if (this.fileType === 'text') {
    url = '/upload/text';
  }

  axios
    .post(url, formData, {
      onUploadProgress: (progressEvent) => {
        this.uploadProgress = Math.round(
          (progressEvent.loaded / progressEvent.total) * 100
        );
      },
    })
    .then((response) => {
      // 处理上传成功的逻辑
    })
    .catch((error) => {
      // 处理上传失败的逻辑
    });
},

这样，根据选择的文件类型，我们可以上传不同类型的文件。

以上就是使用Vue和Axios实现文件上传自定义进度条的完整攻略。你可以根据自己的需求进行进一步的定制和扩展。

阅读剩余 66%