iview+axios实现文件取消上传
iview+axios实现文件取消上传
iview框架的上传文件目前不支持在上传文件的过程中取消上传,结合axios请求可以实现:使用iview的上传和拖拽功能,却使用axios的上传文件功能来实现取消上传。
html
<Upload
type="drag"
class="upload-small-area"
:show-upload-list="false"
:before-upload="beforeUpload"
action="/example/api/file">
<div class="upload-small-cont">
<p class="upload-small-tip">点击/拖拽上传文件</p>
<p class="upload-small-tip">请上传apk/ipa格式文件</p>
</div>
</Upload> <!-- 上传弹窗 -->
<Modal
title="Title"
v-model="uploadModal"
:mask-closable="false"
@on-cancel="closeUpModal"
class-name="opera-modal">
<div class="upload-progress">
<p class="file-name">{{fileName}}</p>
<Progress :percent="filePercent" :stroke-width="3"></Progress> <!-- 进度条 -->
<div class="progress-btn" v-show="filePercent !== 100">
<Button type="ghost" class="modu-ghost-btn" @click="closeUpModal">取消</Button>
</div>
<div class="progress-success-btn" v-show="filePercent === 100">
<Button type="ghost" class="modu-ghost-btn">下一步</Button>
<Button type="primary" class="modu-primary-btn">直接发布</Button>
</div>
</div>
</Modal> <!-- 失败弹窗 -->
<Modal
title="上传"
v-model="errorModal"
@on-cancel="closeErrModal"
:mask-closable="false"
class-name="opera-modal">
<div class="upload-error">
<div class="upload-error-status">
<p class="upload-error-tip">不支持的上传,请上传apk或ipa文件</p>
</div>
<div class="upload-error-btn">
<Button type="ghost" class="modu-ghost-btn" @click="closeErrModal">取消</Button>
<Upload
class="reUpload-btn"
:show-upload-list="false"
:before-upload="beforeUpload"
action="/example/api/file">
<Button type="primary" class="modu-primary-btn">重新上传</Button>
</Upload>
</div>
</div>
</Modal>
js
export default {
data(){
return {
fileformat: ['apk', 'ipa'], // 允许上传的文件类型
fileName: null, // 文件名字
filePercent: 0, // 上传进度
uploadModal: false, // 上传弹窗
errorModal: false, // 上传失败弹窗
cancelUpload: null // 取消上传
}
},
methods:{
// 上传之前
beforeUpload(file) {
console.log("上传之前")
console.log(file)
this.fileAjaxUpload(file);
return false; // 阻止使用iview的上传功能
},
// 关闭上传弹窗/取消上传
closeUpModal() {
console.log("取消上传");
if(this.cancelUpload){ // 判断cancelUpload是否存在
this.cancelUpload.cancel('取消上传'); //在请求catch()的error中输出'取消上传'
}
},
// 关闭上传失败弹窗
closeErrModal() {
this.errorModal = false;
},
// 上传文件请求
fileAjaxUpload(file) {
let self = this;
this.fileName = file.name;
// 验证上传的文件类型
let index1 = file.name.lastIndexOf(".");
let index2 = file.name.length;
let fileSuffix = file.name.substring(index1+1, index2).toLowerCase();
if (this.fileformat.indexOf(fileSuffix) == -1) { // 类型不符合
this.$Message.error("文件格式不正确,请上传apk/ipa格式文件");
return false;
}
// 上传文件
let fd = new FormData(); // 声明formData()
fd.append('file', file);
let CancelToken = this.$http.CancelToken;
this.cancelUpload = CancelToken.source();
this.$http({
url:'/example/api/file',
method:'post',
data: fd,
transformRequest: [function(data){
return data;
}],
cancelToken: self.cancelUpload.token, // 取消事件
onUploadProgress: function(progressEvent) { // 上传进度事件
if(progressEvent.lengthComputable){
// 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量
// 如果lengthComputable为false,就获取不到progressEvent.total和progressEvent.loaded
console.log(progressEvent)
self.uploadModal = true;
self.errorModal = false;
self.filePercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2));
}
}
}).then(res =>{
// 上传成功
console.log(res)
}).catch(error =>{
console.log(error)
if (self.$http.isCancel(error)) { // 取消上传
self.uploadModal = false;
self.$Message.info(error.message);
} else {
self.uploadModal = false;
self.errorModal = true;
}
})
}
}
}
iview+axios实现文件取消上传的更多相关文章
- vue-resource+iview上传文件取消上传
vue-resource+iview上传文件取消上传 子组件: <template> <div class="upload-area-div"> <U ...
- jQuery Ajax方式上传文件实现暂停或取消上传
未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...
- vue大文件分片上传插件
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- php选择文件夹上传
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...
- 聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- .Net多文件同时上传(Jquery Uploadify)
前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...
- 利用uploadify+asp.net 实现大文件批量上传。
前言 现在网上文件上传组件随便一搜都是一大堆,不过看大家一般都在用uploadify这个来上传文件.由于项目需要,我在来试了一下.因为第一次使用,也遇到了很多问题,特此记录! ------------ ...
- 利用Jquery使用HTML5的FormData属性实现对文件的上传
1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...
随机推荐
- hdu 2845——Beans——————【dp】
Beans Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- css 清除float的方法
首先我们要理解这个flaot 为什么要清除,作为小白来说直接颠覆了我之前学的内容,因为之前学的东西虽然碰到float后,脱离文档流后给兄弟元素或者父元素造成影响,但是都是通过option来定位 要么绝 ...
- (转载)C#获取当前应用程序所在路径及环境变量
一.获取当前文件的路径 string str1=Process.GetCurrentProcess().MainModule.FileName;//可获得当前执行的exe的文件名. string st ...
- hibernate注解JPA
1.JPA与hibernate 什么是JPA ? java persistence api :java持久化api,同一的ORM规范,是由sun公司指定的规范接口,hibernate实现了JPA规范. ...
- IntelliJ IDEA 2017.2 下载和破解方法
一.IntelliJ IDEA 2017 下载地址 http://www.jetbrains.com/idea/#chooseYourEdition 要下载付费版的,免费版的很多功能不能用 二.破解 ...
- Java进程内缓存
今天和同事聊到了缓存,在Java中实现进程缓存.这里主要思想是,用一个map做缓存.缓存有个生存时间,过期就删除缓存.这里可以考虑两种删除策略,一种是起一个线程,定期删除过期的key.第二个是,剔除模 ...
- synchronized修饰普通方法和静态方法
首先,要知道,synchronized关键字修饰普通方法时,获得的锁是对象锁,也就是this.而修饰静态方法时,锁是类锁,也就是类名.class. synchronized修饰普通方法 Synchro ...
- Cocos2d-js 开发记录:声音播放
声音播放可以使用cc.audioEngine,需要播放的文件在resource.js中进行添加如: button_press_mp3: "res/audio/press.mp3", ...
- mysql 字符串转换呈毫秒值
SELECT CEIL((UNIX_TIMESTAMP('2011-05-31 23:59:59') - UNIX_TIMESTAMP('2011-05-31 00:59:59'))/1000/60/ ...
- C#程序的编译和执行
1.在讲解 C# 程序的编译与执行之前,首先了解以下两个概念,以便充分理解C# 程序的运行. CLI--Common Language Infrastructure 的简称,C# 程序在Microso ...