脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Axios文件上传进度条

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

 更新时间：2022年08月15日 09:54:13   作者：麦兜小心点  
这篇文章主要为大家详细介绍了Vue+Axios实现文件上传自定义进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前文： 之前一直用Elemet-UI的upload组件，但是ui给出的样式Element-UI满足不了，所以决定自己写一个玩玩

总体分三步：

1、页面布局（自定义上传组件样式）
2、Axios上传
3、监听Process 联动页面实现进度条

成果

1、页面布局

<div class="display-upload-wrapper"> 
  <div class="innier-upload-wrapper" :style="innerUploadStyle"> 
     自定义的upload样式 
     <div v-if="fileInfo">{{ fileInfo.name }}.{{ fileInfo.format }} 上传完成</div> 
   </div> 
</div> 
<input id="upload-file" ref="uploadInput" type="file" @change="getFile">

通过input file 上传文件 ，原生的upload input 太丑了，好多人是不是都忘接了什么样子了，我帮大家回忆一下

我们可以通过css隐藏这个文件，让后用js 给其他的dom绑定上这个input的点击事件实现

CSS

.display-upload-wrapper {
  border: 1px solid red;
  width: 384px;
  height: 54px;
  cursor: pointer;
  width: 244px;
  border-radius: 4px;
  background: #F4F8FF;
  .innier-upload-wrapper {
    height: 100%;
    background: linear-gradient(270deg, #C0D8FF 0%, #E7F2FF 100%);
    background-repeat: no-repeat;
    background-size: 10% 100%;
    transition: background-size .3s linear;
  }
}
#upload-file {
  display: none;
}

js

document.querySelector('.display-upload-wrapper').onclick = function() {
  document.querySelector('#upload-file').click()
}

这样点击就可以调起文件选择

2、Axios上传

获取到选中的文件

getFile() {
   const file = this.$refs.uploadInput.files[0]
    if (!file) return
    // 获取到的file用FormData处理成表单键值对
    const formData = new FormData()
    formData.append('file', file)
   //uplaodFileApi是文件上传的api 第一个入参为上传的文件，第二个入参为上传的进度的回调
    uplaodFileApi(formData, this.onProcess).then(res => {
      console.log('uplaodFileApi succ: ', res)
      const { success, msg, data } = res
      if (success) {
        this.fileInfo = data
      }
    })
  },

获取到的file用FormData处理成表单键值对
const formData = new FormData()
formData.append('file', file)Axios的入参为

{
    "method":"POST",
    "url":"/jz/boss/public/upload/b",
    "data":{
 
    },
    "params":{
        "appToken":"xxxxxxxxxxxxxxxxxxxxx ="
    },
    "withCredentials":true,
    "headers":{
        "Content-Type":"multipart/form-data;charset=UTF-8"
    },
    "responseType":""
}

data的值就是传入的fromData，控制台直接打印不出的

要注意的是 headers的Content-Type 要设置成multipart/form-data;charset=UTF-8 "

Content-Type":"multipart/form-data;charset=UTF-8"

做完这些操作我们就可以上传成功了

3、监听Process 联动页面实现进度条

Axios提供了onUploadProgress的回调

所有原生的processs的处理都可以，下面的图就是这个回调的progressEvent

用total 和loaded我们就可以算出进度条的百分比

onProcess(e) {
  const { loaded, total } = e
  const uploadPrecent = ((loaded / total) * 100) | 0
  this.uploadPrecent = uploadPrecent
},

完整代码 

<template>
  <div>
    {{ uploadPrecent }}%
    <div class="display-upload-wrapper">
      <div class="innier-upload-wrapper" :style="innerUploadStyle">
        自定义的upload样式
        <div v-if="fileInfo">{{ fileInfo.name }}.{{ fileInfo.format }} 上传完成</div>
      </div>
    </div>
    <input id="upload-file" ref="uploadInput" type="file" @click="clearPreUpload" @change="getFile">
  </div>
</template>
 
<script>
import { uplaodFileApi } from '@/api/uploadApi'
import { UploadStatus } from './format'
export default {
  name: 'Myupload',
 
  data() {
    return {
      uplaodStatus: UploadStatus.wait,
      uploadPrecent: 0,
      timer: undefined,
      fileInfo: undefined
    }
  },
  computed: {
    innerUploadStyle() {
      return `background-size: ${this.uploadPrecent}% 100%;`
    }
  },
  mounted() {
    this.bindUplaodClickToDisplayUplaod()
  },
 
  methods: {
    bindUplaodClickToDisplayUplaod() {
      document.querySelector('.display-upload-wrapper').onclick = function() {
        document.querySelector('#upload-file').click()
      }
    },
    getFile() {
      const file = this.$refs.uploadInput.files[0]
      if (!file) return
      const formData = new FormData()
      formData.append('file', file)
      uplaodFileApi(formData, this.onProcess).then(res => {
        const { success, msg, data } = res
        if (success) {
          this.fileInfo = data
        }
      })
    },
    onProcess(e) {
      const { loaded, total } = e
      const uploadPrecent = ((loaded / total) * 100) | 0
      this.uploadPrecent = uploadPrecent
    },
    clearPreUpload() {
 
    }
  }
}
</script>
 
<style lang="scss" scoped>
  .display-upload-wrapper {
    border: 1px solid red;
    width: 384px;
    height: 54px;
    cursor: pointer;
    width: 244px;
    border-radius: 4px;
    background: #F4F8FF;
    .innier-upload-wrapper {
      height: 100%;
      background: linear-gradient(270deg, #C0D8FF 0%, #E7F2FF 100%);
      background-repeat: no-repeat;
      background-size: 10% 100%;
      transition: background-size .3s linear;
    }
  }
  #upload-file {
    display: none;
  }
</style>

这个请求代码删减过 仅供参考可以理解为 伪代码

const HttpRequest = (type, option) => {
  const options = {
    expirys: true,
    ...option
  }
  return new Promise((resolve, reject) => {
    const queryParams =
      {
          method: type,
          url: options.url,
          data: options.data,
          params: { appToken: requestToken() },
          withCredentials: true,
          headers: options.header ? options.header : DEFAULT_HEADER,
          responseType: options.responseType || ''
        }
    // 如果有onProcess就给axios绑定onUploadProgress回调
    if (options.onProcess) {
      queryParams.onUploadProgress = options.onProcess
    }
    if (options.timeout) {
      queryParams.timeout = options.timeout
    }
    axios(queryParams)
      .then(
        res => {
          const { data = {}, headers = {} } = res || {}
          const result = Object.assign(data, headers)
          resolve(result)
        },
        err => {
          reject(err)
        }
      )
      .catch(error => {
        reject(error)
      })
      .finally(() => {})
  })
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue实现简单的星级评分组件源码

    vue实现简单的星级评分组件源码

    这篇文章主要介绍了vue星级评分组件源码,代码简单易懂非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2018-11-11
  • vue 实现基础组件的自动化全局注册

    vue 实现基础组件的自动化全局注册

    这篇文章主要介绍了vue 实现基础组件的自动化全局注册的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2020-12-12
  • 详解为什么Vue中不要用index作为key(diff算法)

    详解为什么Vue中不要用index作为key(diff算法)

    这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 超全面的vue.js使用总结

    超全面的vue.js使用总结

    Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。下面这篇文章主要给大家介绍了关于vue.js使用的相关总结,需要的朋友可以参考借鉴。
    2017-02-02
  • WebStorm无法正确识别Vue3组合式API的解决方案

    WebStorm无法正确识别Vue3组合式API的解决方案

    这篇文章主要介绍了WebStorm无法正确识别Vue3组合式API的解决方案，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
    2021-02-02
  • Vue如何使用cdn加载资源加快打包速度

    Vue如何使用cdn加载资源加快打包速度

    外部的库文件,可以使用CDN资源,或者别的服务器资源等,下面这篇文章主要给大家介绍了关于Vue如何使用cdn加载资源加快打包速度的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 详解如何在Vue项目中导出Excel

    详解如何在Vue项目中导出Excel

    这篇文章主要介绍了如何在Vue项目中导出Excel，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue实现拖拽式分割布局

    Vue实现拖拽式分割布局

    这篇文章主要为大家详细介绍了Vue实现拖拽式分割布局，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 详解Vue3-pinia状态管理

    详解Vue3-pinia状态管理

    这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下
    2022-08-08
  • vue2中如何使用swiper@5.4.5

    vue2中如何使用swiper@5.4.5

    这篇文章主要介绍了vue2中如何使用swiper@5.4.5问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12

最新评论