el-upload使用http-request自定义上传和进度条实战
介绍
项目中发现使用默认的el-upload
上传动作发送上传请求的时候不会带上请求头,于是想通过自定义请求也就是http-request
来自定义上传。实践证明这条路是通的,不过有个小问题就是原本上传的进度条没了。于是搞一个自定义进度条。
实现效果
表单
<el-upload
class="upload-demo"
action=""
:http-request="uploadMehod"
:before-remove="beforeRemove"
:limit="1"
:file-list="fileList"
accept=".zip"
>
<el-button size="small" type="primary">上传到服务器</el-button>
<el-progress style="width: 200px;margin-top: 8px" :percentage="progressPercent" />
</el-upload>
上传方法
data() {
return {
progressPercent: 0, // 进度条默认为0
}
}
methods: {
/**
* 自定义上传图片的方法
*/
uploadMehod(params) {
// 上传新文件时,将进度条值置为零
this.progressPercent = 0
const file = params.file
this.forms = new FormData() // 实例化一个formData,用来做文件上传
this.forms.append('file', file)
// 将图片单独上传,并返回路径
// 进度条
const uploadProgressEvent = progressEvent => {
this.progressPercent = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
}
// 调用axios包装后的上传请求方法
uploadFile(this.forms, uploadProgressEvent).then(res => {
if (res.code === 200) {
//TODO 调用成功方法
}else{
//TODO 调用失败方法
}
}).catch(response => {
console.log('文件上传失败')
})
},
}
// 然后在接口中,将参数传过去
export function uploadFile(obj, onUploadProgress) {
return request({
url: '上传的路径',
method: 'POST',
data: obj,
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress
})
}
el-upload使用http-request自定义上传和进度条实战的更多相关文章
- Jquery.Uploadify实现批量上传显示进度条 取消 上传后缩略图显示 可删除
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpLoad.aspx.cs&q ...
- node实现http上传文件进度条 -我们到底能走多远系列(37)
我们到底能走多远系列(37) 扯淡: 又到了一年一度的跳槽季,相信你一定准备好了,每每跳槽,总有好多的路让你选,我们的未来也正是这一个个选择机会组合起来的结果,所以尽可能的找出自己想要的是什么再做决定 ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- asp.net大文件上传与上传文件进度条问题
利用Plupload解决大容量文件上传问题, 带进度条和背景遮罩层 关于Plupload结合上传插件jquery.plupload.queue的使用 这是群里面一位朋友给的资料. 下面是自己搜索到的一 ...
- atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7
atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7 1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传 ...
- atitit. 文件上传带进度条 atiUP 设计 java c# php
atitit. 文件上传带进度条 atiUP 设计 java c# php 1. 设计要求 1 2. 原理and 架构 1 3. ui 2 4. spring mvc 2 5. springMVC.x ...
- php上传文件进度条
ps:本文转自脚本之家 Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP 5.4以前 ...
- struts2多文件上传(带进度条)demo+说明
利用plupload插件实现多文件上传,实现图片: 在jsp写入js代码: z<%@ page language="java" contentType="text/ ...
- jQuery.uploadify-----文件上传带进度条,支持多文件上传的插件
借鉴别人总结的uploadify:基于jquery的文件上传插件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,控制文件上传大小,删除已上传文件. uploadify有两个版本,一个用f ...
- springMVC+ajax 文件上传 带进度条
前端代码: <form id= "uploadForm"> <p >指定文件名: <input type="text" name= ...
随机推荐
- JVM内存参数的学习之三
JVM内存参数的学习之三 背景 研究启动性能时, 顺便看到了jmap -heap 1 的部分信息 看到: MinHeapFreeRatio.MaxHeapFreeRatio 自己突然以为是 Perce ...
- [转帖]20--Deployment常规操作
https://www.cnblogs.com/caodan01/p/15309966.html 目录 一.Deployment滚动更新 1.更新配置清单 2.设置镜像 kubectl set ima ...
- [转帖]SQL Server中查询CPU占用高的SQL语句
本文导读:触发器造成死锁.作业多且频繁.中间表的大量使用.游标的大量使用.索引的设计不合理.事务操作频繁.SQL语句设计不合理,都会造成查询效率低下.影响服务器性能的发挥.我们可以使用sql serv ...
- [转帖]umount -fl用法
https://www.cnblogs.com/xingmuxin/p/8446178.html umount, 老是提示:device is busy, 服务又不能停止的.可以用"umou ...
- Python学习之五_字符串处理生成查询SQL
Python学习之五_字符串处理生成查询SQL 前言 昨天想给同事讲解一下获取查询部分表核心列信息的SQL方法 也写好了一个简单文档. 但是感觉不是很优雅. 最近两三天晚上一直在学习Python. 想 ...
- [转帖]Kdump配置及使用(详细)总结(二)
一.简介 本文主要介绍如何打开Kdump并对其相关文件进行配置.前面章节已经对Kdump调试机理进行总结总结,具体可以点击下面链接: Kdump调试机理总结(一) crash工具分析vmcore文件常 ...
- [转帖]@nginx多server及使用优化(php)
文章目录 一.nginx多server优先级 二.禁止IP访问页面 三.nginx的包含include 四.nginx 路径的alias和root 1.配 ...
- lldb3.9.0 安装攻略
Study From https://github.com/dotnet/diagnostics/blob/master/documentation/lldb/centos7/build-instal ...
- Gin 项目引入热加载
目录 一.什么是热加载 二.Air 2.1 介绍 2.2 特性 特性: 2.3 相关文档 2.4 安装 推荐使用 install.sh 使用 go install 2.5 配置环境变量 2.6 使用 ...
- windwos10任务栏居中
如下操作 新建一个文件夹如图 然后出现这个重右往左一直拖然后拉出来就行了如图 拖不动或者没有的把这个关了-锁定任务栏 文字如何隐藏? 在这个文字旁边右击关闭标题即可 然后锁定任务栏就OK了