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实现文件取消上传的更多相关文章

  1. vue-resource+iview上传文件取消上传

    vue-resource+iview上传文件取消上传 子组件: <template> <div class="upload-area-div"> <U ...

  2. jQuery Ajax方式上传文件实现暂停或取消上传

    未上传时要实现取消,很简单... 但如果用户点击了上传,并加载了进度信息... 2017-05-04再次改进.在上传过程中用户可以按 Esc 来取消上传(取消当前上传,或者是全部上传)... 也可以在 ...

  3. vue大文件分片上传插件

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  4. php选择文件夹上传

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  5. 聚是一团火散作满天星,前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...

  6. 带进度条的文件批量上传插件uploadify

    有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...

  7. .Net多文件同时上传(Jquery Uploadify)

    前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...

  8. 利用uploadify+asp.net 实现大文件批量上传。

    前言 现在网上文件上传组件随便一搜都是一大堆,不过看大家一般都在用uploadify这个来上传文件.由于项目需要,我在来试了一下.因为第一次使用,也遇到了很多问题,特此记录! ------------ ...

  9. 利用Jquery使用HTML5的FormData属性实现对文件的上传

    1.利用Jquery使用HTML5的FormData属性实现对文件的上传 在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我 ...

随机推荐

  1. Java自定义注解源码+原理解释(使用Java自定义注解校验bean传入参数合法性)

    Java自定义注解源码+原理解释(使用Java自定义注解校验bean传入参数合法性) 前言:由于前段时间忙于写接口,在接口中需要做很多的参数校验,本着简洁.高效的原则,便写了这个小工具供自己使用(内容 ...

  2. MAC 下安装RabbitMQ

    1.使用brew来安装 RabbitMQ(地址:http://www.rabbitmq.com/install-standalone-mac.html ) 2.安装目录 /usr/local/Cell ...

  3. js把数据处理成钱的格式

    1.var Rmoney = parseFloat(money).toFixed(2);//把money处理成保存2位小数的格式

  4. 【Sql server: T-Sql 技术内幕 系列】之索引篇

    本文系 T-Sql技术内幕系列读后感. 用过数据库的程序猿都知道,索引可以极大的优化sql语句的执行时间,但是您要问我,怎么减少的,我只能说:"抱歉,我也不太清楚." 带着这个疑惑 ...

  5. js正则验证表达式

    //上传文件大小验证 $.fn.checkFileTypeAndSize = function (options) { //默认设置 var defaults = { allowedExtension ...

  6. 关于input 中 hidden属性在后台作用的实例

    在双模的项目中,我遇到了一个问题,我公司的双模项目是基于ECShop的框架,在完成订单列表的页面时,我写了两个form表单来单独传输数据,第一个表单是用来做搜素的,第二个表单是用来显示表单信息的,在控 ...

  7. pId的数据结构转children 数据结构(JS);

    在工作中经常遇到需要把带有pId的的list数据转换为children格式的树形结构,一直都没有找到太好的工具函数.偶然间看到了这个函数,研究了下,感觉这个函数很强大,所以记录下来,作为备用,同时也贴 ...

  8. Android NestedScrollView与RecyclerView嵌套,以及NestedScrollView不会滚动到屏幕顶部解决

    ①NestedScrollView与RecyclerView嵌套,导致滚动惯性消失 解决:mRecyclerView.setNestedScrollingEnabled(false); ②Nested ...

  9. 搭建 Spring 2.5.6 开发环境

    1.jar 包准备: spring 2.5.6 的 jar 包(链接: http://pan.baidu.com/s/1skVFfcx 密码: mbiz),如图: commons-logging-1. ...

  10. CAA介绍(转)

    CAA是DS公司正对于其一系列产品,eg:CATIA,ENOVIA,DELIMA,etc,进行二次开发的一个环境.与VC结合的比较紧密.CAAV4是用于Unix/Linux的,到CAAV5才移植到Wi ...