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--Router动态路由的用法,很多时候，我们需要将给定匹配模式的路由映射到同一个组件，在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为路径参数，本文对Vue Router动态路由相关知识给大家介绍的非常详细，需要的朋友参考下吧2022-08-08
这篇文章主要介绍了Vue3使用mitt进行组件通信的步骤，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-05-05
本文介绍了如何使用Vite快速搭建Vue项目,强调Vite对Node.js版本有最低要求（>=12.0.0）,提供了环境准备、安装步骤和启动指南,旨在帮助开发者高效启动Vue项目2024-10-10
本篇文章主要介绍了Vue学习笔记进阶篇之过渡状态详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vue项目报错:Missing script:"serve"的解决办法
这篇文章主要给大家介绍了关于vue项目报错:Missing script:"serve"的解决办法,"missing script: serve"是一个错误信息,意味着在执行启动脚本时,找不到名为"serve"的脚本,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue中使用swiper失效问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快,下面这篇文章主要给大家介绍了关于虚拟DOM与diff算法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了用vue简单的实现点击按钮切换背景颜色，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要给大家介绍了关于vue数据更新但视图(DOM)不刷新的几种解决办法,我们在开发过程中经常会碰到数据更新,但是视图并未改变的情况,需要的朋友可以参考下2023-08-08
最新评论