vue-resource+iview上传文件取消上传
vue-resource+iview上传文件取消上传
子组件:
<template> <div class="upload-area-div"> <Upload :type="upType" class="upload-area" :show-upload-list="false" :before-upload="beforeUpload" :action="uploadUrl"> <slot></slot> </Upload> <!-- 上传弹窗 --> <Modal title="上传" class-name="flex-center-modal opera-modal not-footer" v-model="uploadModal" :mask-closable="false" @on-cancel="closeUpModal"> <div class="upload-progress"> <p class="file-name">{{fileName}}</p> <Progress class="modu-progress" :percent="filePercent" :stroke-width="3"></Progress> <div class="progress-btn"> <Button type="ghost" size="large" class="modu-ghost-btn" v-show="filePercent !== 100" @click="closeUpModal">取消</Button> <!-- <Button type="primary" size="large" class="modu-primary-btn" v-show="filePercent === 100" @click="onComplete">完成</Button> --> </div> </div> </Modal> <!-- Loading提示 --> <Spin size="large" fix v-if="loadFlag" class="modu-spin"> <Icon type="load-c" size=18 class="modu-spin-icon-load"></Icon> <div class="modu-spin-text">Loading</div> </Spin> </div> </template>
<script type="text/ecmascript-6"> export default { props: { upType: { // 是否允许拖拽上传,select为点击上传 type: String, default: "drag" }, uploadUrl: { // 上传文件接口 type: String, default: "/example/api/file" }, fileformat: { // 允许上传的文件类型后缀 type: Array, default: function() { return ['zip'] } } }, data(){ return { fileName: null, // 文件名字 filePercent: 0, // 上传进度 uploadModal: false, // 上传弹窗 fileUrl:'', loadFlag: false, previousRequest: null } }, mounted(){ }, methods:{ // 上传之前 beforeUpload(file) { // console.log("上传之前") this.loadFlag = true; this.fileAjaxUpload(file); return false; }, // 关闭上传弹窗/取消上传 closeUpModal() { this.$Message.info('取消上传'); if (this.previousRequest) { this.previousRequest.abort(); } this.uploadModal = 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.loadFlag = false; this.$Message.error("文件格式不正确,请上传zip格式文件"); return false; } let fd = new FormData(); // 声明formData() fd.append('file', file); this.$http({ url: self.uploadUrl, method:'post', body: fd, before(request) { self.previousRequest = request; }, progress: function(progressEvent) { // 上传进度事件 self.loadFlag = false; if(progressEvent.lengthComputable){ // 属性lengthComputable主要表明总共需要完成的工作量和已经完成的工作是否可以被测量 // 如果lengthComputable为false,就获取不到progressEvent.total和progressEvent.loaded self.uploadModal = true; let _percent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2)); self.filePercent = _percent < 100 ? _percent : 99; } } }).then((response) =>{ // 上传成功 let resp = response.data; if (resp.status === 200) { self.filePercent = 100; self.fileUrl = resp.data; self.$emit('onComplete', resp.data); self.$Message.success('上传成功'); } else { if (resp.status !== 401) { self.$Message.error(resp.desc); } } this.uploadModal = false; }).catch(error =>{ self.loadFlag = false; self.uploadModal = false; if (self.previousRequest) { self.previousRequest.abort(); } }) } } } </script>
父组件调用:
<m-upload @onComplete="onComplete"> <div class="offLine-war"> <div class="offLine-war-title">{{ fileUrl ? '重新上传' : '上传压缩包' }}</div> </div> </m-upload> <script> import mUpload from '@/components/mUpload/mUpload.vue'; export default { data() { return { fileUrl: '' } }, components: { mUpload: mUpload }, methods: { onComplete(fileUrl) { this.fileUrl = fileUrl; } } } </script>