vue写一个上传附件功能有上传进度

安装依赖

首先需要安装 axios 和 element-ui，这两个依赖项是上传附件所必需的。

npm install axios element-ui --save

创建上传组件

在 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>

实现上传功能

在 handleUpload 方法中，获取到上传的文件后将其存储在 file 变量中。在 uploadFile 方法中，将文件使用 FormData 格式进行提交，并利用 onUploadProgress 事件监听上传进度。

上传成功后，将进度条置为 0，并将上传状态设置为 success，并通过 $emit 方法向父组件传递上传成功的数据。上传失败时，将进度条置为 0，并将上传状态设置为 exception。

使用上传组件

在父组件中引用上传组件，并监听上传成功事件。

<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>