Vue+Axios实现文件上传自定义进度条
作者:麦兜小心点 发布时间:2024-05-29 22:24:57
标签: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(() => {})
? })
}
来源:https://blog.csdn.net/qq_39861930/article/details/125628605


猜你喜欢
- --销售冠军 --问题:在公司中,老板走进来,要一张每个地区销量前3名的销售额与销售员的报表 --- create table salesd
- 本文实例为大家分享了python实现最速下降法的具体代码,供大家参考,具体内容如下代码:from sympy import *import
- <html> <head> <title> New Document </title> &l
- PL/SQL是ORACLE对标准数据库语言的扩展,ORACLE公司已经将PL/SQL整合到ORACLE 服务器和其他工具中了,近几年中更多的
- 语法:replace(self, to_replace=None, value=None, inplace=False, limit=Non
- Python中的字典一、字典的特点二、创建字典创建字典用大括号表示dict1={'a':3,'b':4,
- 相信很多小伙伴想着自己的移动端项目能够自动转换为rem,这才符合前端的潮流,如果用自己手写或者编辑器插件来改动十分不方便还容易出错,我在网上
- 前言总之,两者都是用来重塑tensor的shape的。view只适合对满足连续性条件(contiguous)的tensor进行操作,而res
- Mysql Workbench是一款开源的数据库客户端,在IT行业这款开源的软件也是相当有名气的,很多使用musql的同仁都喜欢使用这款客户
- 正则表达式正则表达用来匹配字符串正则表达式匹配过程依次拿出表达式和文本中的字符串进行比价如果每个字符都能匹配,则匹配成功;一旦有匹配不成功的
- 隔离级别:隔离性其实比想象的要复杂。 在SQL标准中定义了四种隔离级别, 每一个事务中所做的修改,哪些在事务内和事务间是可见的,哪些是不可见
- 前几天图书馆说服务器(Ubuntu14.04)有安全漏洞,不按时修复会关停。看了一下漏洞清单,主要是ssh和mysql的版本问题。把mysq
- 一、什么是XSS攻击xss攻击:----->web注入xss跨站脚本攻击(Cross site script,简称xss)是一种“HT
- 本文实例讲述了python实现获取单向链表倒数第k个结点的值。分享给大家供大家参考,具体如下:#初始化链表的结点class Node():
- 数据集成:将不同表的数据通过主键进行连接起来,方便对数据进行整体的分析。两张表:ReaderInformation.csv,ReaderRe
- 是否看见大站的广告都是放在内容中间实现文字环绕的呢,一般普通小站广告只能放在内容开头或者结尾,也许大站的cms系统带这个功能吧,我们小站常用
- 获取Tensor的维数>>> import tensorflow as tf>>> tf.__versi
- 一 引入解释器在执行到定义变量的语法时,会申请内存空间来存放变量的值,而内存的容量是有限的,这就涉及到变量值所占用内存空间的回收问题,当一个
- 问:我最近升级了一个应用程序,使其可以在 SQL Server 2005 上运行。我利用了允许行长度超出 8,060 个字节这项功能,以便用
- 前言本文主要给大家介绍了关于Python3用SMTP协议发送电子邮件的相关内容,在介绍如何使用python程序向指定邮箱发送邮件之前,我们需