Vue 上传附件功能实现：进度条、Element UI 和 Axios

本文将带你一步步实现一个 Vue 上传附件功能，包括显示上传进度和使用 Element UI 的组件。

1. 安装依赖

首先，我们需要安装 axios 和 element-ui 两个依赖项，它们是实现上传功能所必需的：

npm install axios element-ui --save

2. 创建上传组件

在你的 Vue 项目中创建一个名为 Upload.vue 的组件，代码如下：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleUpload"
    >
      <el-button type="primary">上传附件</el-button>
    </el-upload>
    <el-progress
      v-if="uploadProgress"
      :percentage="uploadProgress"
      :status="uploadStatus"
    ></el-progress>
  </div>
</template>

<script>
import { ElUpload, ElButton, ElProgress } from 'element-ui'
import axios from 'axios'

export default {
  name: 'Upload',
  components: { ElUpload, ElButton, ElProgress },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploadProgress: 0,
      uploadStatus: '',
      file: null
    }
  },
  methods: {
    handleUpload(file) {
      this.file = file.raw
    },
    uploadFile() {
      const formData = new FormData()
      formData.append('file', this.file)

      axios.post(this.uploadUrl, formData, {
        onUploadProgress: progressEvent => {
          this.uploadProgress = Math.round(
            (progressEvent.loaded / progressEvent.total) * 100
          )
        }
      })
        .then(response => {
          this.uploadStatus = 'success'
          this.uploadProgress = 0
          this.$emit('upload-success', response.data)
        })
        .catch(error => {
          this.uploadStatus = 'exception'
          this.uploadProgress = 0
          console.log(error)
        })
    }
  }
}
</script>

3. 实现上传功能

handleUpload 方法：当用户选择文件后，会触发该方法。我们将文件信息存储在 file 变量中。
uploadFile 方法：该方法负责将文件上传到服务器。
- 我们使用 FormData 对象将文件打包，并使用 axios.post 方法发送 POST 请求到 /api/upload 接口。
- onUploadProgress 事件监听上传进度，并更新 uploadProgress 变量，从而在进度条中显示进度。
- 上传成功后，我们将 uploadStatus 设置为 'success'，并将 uploadProgress 设置为 0，并通过 $emit 向父组件发送上传成功事件。
- 上传失败后，我们将 uploadStatus 设置为 'exception'，并将 uploadProgress 设置为 0，并记录错误信息到控制台。

4. 使用上传组件

在你的父组件中引用 Upload 组件，并监听 upload-success 事件，获取上传成功后的数据：

<template>
  <div>
    <upload @upload-success="handleUploadSuccess"></upload>
  </div>
</template>

<script>
import Upload from './Upload.vue'

export default {
  name: 'App',
  components: { Upload },
  methods: {
    handleUploadSuccess(data) {
      console.log(data)
    }
  }
}
</script>

注意

确保 /api/upload 是你的实际上传接口地址，根据实际情况进行修改。
你需要根据自己的需求修改上传成功后返回的数据结构。

现在你已经成功实现了 Vue 上传附件功能，并包含进度条显示和错误处理。希望本文能帮助你更好地理解 Vue 上传功能的实现。