上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')

<!--
* @description 上传组件
* @fileName sysUpload.vue
* @author 彭成刚
* @date // ::
* @version V1.0.0
!-->
<template>
<div>
<Upload :action="$baseUrl + 'API/file/upload'"
ref="upload"
:class="disabled ? 'uploadDisabled' : ''"
:default-file-list="defaultFileList"
name="file"
:on-preview="handleOnPreview"
:headers="headers"
:on-success="handleSuccess"
:on-remove="handleOnRemove"
:before-upload="handleBeforeUpload">
<Button icon="ios-cloud-upload-outline"
:disabled="disabled">上传文件</Button>
</Upload>
<!-- <div v-if="defaultVif">
<Icon type="md-document" /> <a :href="this.defaultList.url">{{this.defaultList.name}}</a>
</div> -->
<!-- <div v-if="disabled"
style="float:left;">{{defaultList.name}}</div> -->
<!-- <div style="float:left;">
<Alert type="success"
v-if='alertVif'
@on-close='alertClose'
show-icon
closable>
{{alertText}}
</Alert>
</div> -->
</div>
</template> <script>
import { getToken } from '@/libs/util'
export default {
// 多个值的初始化 还是用init吧
props: {
headers: {
type: Object,
default: () => {
return { token: getToken() }
}
},
disabled: {
type: Boolean,
default: false
}
},
data () {
return {
showUploadList: false,
defaultVif: false,
defaultList: { name: '', url: '' },
defaultFileList: [],
defaultFileList2: [{ name: '' }],
alertText: ''
}
}, components: {}, computed: {}, // mounted() {}, methods: {
handleOnPreview (file) {
console.info('handleOnPreview file', file)
if (file.url) {
window.location.href = file.url
} else {
let f = file.response.data
console.info('f.fileServiceUrl + f.filePath', f.fileServiceUrl + f.filePath)
window.location.href = f.fileServiceUrl + f.filePath
}
},
handleOnProgress (event, file, fileList) {
console.info('handleOnProgress (event, file, fileList) {', event, file, fileList)
},
handleOnRemove (file, fileList) {
console.info('handleOnRemove', file, fileList)
this.$emit('emit-data', { id: '' })
},
handleSuccess (response, file, fileList) {
// this.showUploadList = false
console.info('handleSuccess', response, file, fileList)
if (response.status.toString() === '') {
// 上传成功
this.defaultVif = true
this.defaultList.name = response.data.origName
this.defaultList.url = response.data.fileServiceUrl + response.data.filePath
this.$Message.success('上传成功!')
this.$emit('emit-data', response.data)
} else {
// 上传失败
this.$Message.warning(response.msg)
}
},
handleBeforeUpload (item) {
this.showUploadList = true
let warningStr = ''
let format = ['zip']
if (this.checkFormat(item.name, format)) { warningStr += '文件格式不符,请上传zip格式 ' }
if (this.checkSize(item.size, )) { warningStr += '文件大小超过20M,请检查后重新上传!' }
if (warningStr.length !== ) {
this.$Message.warning({
content: warningStr,
duration: ,
closable: true
})
return false
} if (this.$refs.upload.fileList.length === ) {
console.info('file.length 2 come in')
this.$refs.upload.fileList.splice(, )
}
console.info('default-file-list', this.$refs.upload.fileList)
console.info('file', item)
},
checkSize (size, maxSize) {
// size 单位是byte maxSize 单位是mb
let maxSizeByte = maxSize * *
if (size > maxSizeByte) {
return true
} else {
return false
}
},
checkFormat (fileName, format) {
let index = fileName.lastIndexOf('.')
let suffix = fileName.substr(index + )
// console.info('suffix', suffix)
let ret = true
format.some((item, index, arr) => {
if (item === suffix) {
ret = false
}
})
return ret
},
init (nameStr, url) {
console.info('nameStr', typeof nameStr, nameStr)
console.info('url', url)
if (nameStr !== null && nameStr !== '') {
// this.defaultVif = true
this.defaultFileList = [] this.defaultFileList.push({ name: nameStr, url: url })
// this.$refs.upload.fileList[0].name = nameStr
// this.$refs.upload.fileList[0].url = url
// this.defaultList.name = nameStr
// this.defaultList.url = url
}
}
}
} </script>
<style lang='less'>
.uploadDisabled {
.ivu-upload-list-remove {
display: none;
}
}
</style>

sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')的更多相关文章

  1. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  2. vue 阿里云上传组件

    vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...

  3. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  4. vue图片上传组件

    前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...

  5. vue文件夹上传组件选哪个好?

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  6. vue大文件上传组件选哪个好?

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  7. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  8. AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)

    文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...

  9. AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)

    AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...

随机推荐

  1. RobotFramework:App九宫格滑动解锁

    转自:http://blog.csdn.net/codekxx/article/details/50577381 手势密码在很多手机应用都会运到,手势密码都要求至少连接4个点,但AppiumLibra ...

  2. 在头文件#pragma comment(lib,"glaux.lib");编译器提示waring C4081: 应输入“newline“

    在头文件#pragma comment(lib,"glaux.lib");编译器提示waring C4081: 应输入“newline“ #行不能加分号的

  3. NOI前总结:点分治

    点分治: 点分治的题目基本一样,都是路径计数. 其复杂度的保证是依靠 $O(n)$ 找重心的,每一次至少将问题规模减小为原先的$1/2$. 找重心我喜欢$BFS$防止爆栈. int Root(int ...

  4. Programming With Objective-C---- Encapsulating Data ---- Objective-C 学习(三) 封装数据

      Programming with Objective-C Encapsulating Data In addition to the messaging behavior covered in t ...

  5. View Programming Guide for iOS ---- iOS 视图编程指南(三)---Windows

    Windows Every iOS application needs at least one window—an instance of the UIWindow class—and some m ...

  6. Linux2.6 内核中结构体初始化(转载)

    转自:http://hnniyan123.blog.chinaunix.net/uid-29917301-id-4989879.html 在Linux2.6版本的内核中,我们经常可以看到下面的结构体的 ...

  7. Educational Codeforces Round 20 E - Roma and Poker(dp)

    传送门 题意 Roma在玩一个游戏,一共玩了n局,赢则bourle+1,输则bourle-1,Roma将会在以下情况中退出 1.他赢了k个bourle 2.他输了k个bourle 现在给出一个字符串 ...

  8. 11.6NOIP模拟赛

    [数据规模和限制] 对于全部测试数据,满足 N,M,K≤,W≤ 各个测试点的数据规模及特殊性质如下表. 测试点 N M K ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ ≤ 师 更多咨询:北京信息学窦老师 QQ ...

  9. 449B

    B. Chtholly's request time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  10. jvm 实战

    https://blog.csdn.net/neutrojan/article/details/50532590# 1.ps -ef |grep java 找出最耗性能的JAVA进程2.top -Hp ...