sysUpload.vue上传组件 的时候 看进度的时候 不要mock 注释掉 // if (process.env.NODE_ENV !== 'production') require('@/mock')
上传组件 的时候 看进度的时候 不要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')的更多相关文章
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- vue 阿里云上传组件
vue 阿里云上传组件 Vue.js上传图片到阿里云OSS存储 测试项目git地址 本测试项目启动方法 示例链接 组件配置项 实践解释 本文主要介绍如何 在vue项目中使用web 直传方式上传阿里云o ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- vue图片上传组件
前言:很多项目中都需要用到图片上传功能,而其多处使用的要求,为了避免重复造轮子,让我决定花费一些时间去深入了解,最终封装了一个vue的图片上传组件.现将总结再次,希望有帮助. Layout <d ...
- vue文件夹上传组件选哪个好?
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- vue大文件上传组件选哪个好?
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- AntDesign VUE:上传组件图片/视频宽高、文件大小、image/video/pdf文件类型等限制(Promise、Boolean)
文件大小限制 - Promise checkFileSize(file, rules) { return new Promise((resolve, reject) => { file.size ...
- AntDesign VUE:上传组件自定义限制的两种方式(Boolean、Promise)
AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...
随机推荐
- 【转】maven的安装、配置以及下载jar包
原文地址:https://blog.csdn.net/qq_40673345/article/details/79015456 1.下载maven的压缩包,并解压到除了C盘里的maven文件夹中 2. ...
- VPS 安全措施(CentOS 6)
新到手一台VPS,要做的第一件事大概是做好安全措施. 下面针对CentOS 6随便写点,我目前做的几步是: 修改root密码 SSH-key登录 配置iptable 安装fail2ban 1.修改ro ...
- h.264的POC计算(转载)
转自:http://www.cnblogs.com/TaigaCon/p/3551001.html 本文参考自http://wenku.baidu.com/link?url=ZPF0iSKzwLQg_ ...
- Bid和Ask
一直很懵到底哪个是哪个,记吧,很快就又懵了.网上又坑,每一个解释清楚的.这次搞明白了记下来. 当然,这么逗比的取名法我也是醉了.直接加点东西,UserBuy,UserSell,BankBuy,Bank ...
- Codeforces - 814B - An express train to reveries - 构造
http://codeforces.com/problemset/problem/814/B 构造题烦死人,一开始我还记录一大堆信息来构造p数列,其实因为s数列只有两项相等,也正好缺了一项,那就把两种 ...
- ARC和MRC混合使用
在一些项目中尤其是做迭代的项目经常会出现MRC的项目,但是我们习惯了ARC环境,反之也是一样.这是我们不必去修改代码去掉release之类的,按照如下方案去做就可以了. 项目 -> Build ...
- python __builtins__ str类 (65)
65.'str', 字节转换成字符串.第一个传入参数是要转换的字节,第二个参数是按什么编码转换成字符串 class str(object) | str(object='') -> str | s ...
- linux 问题一 apt-get install 被 lock
问题: sudo apt-get install vim E: Could not get lock /var/lib/dpkg/lock - open (11: Resource temporari ...
- bzoj 3365: [Usaco2004 Feb]Distance Statistics 路程统计【容斥原理+点分治】
统计在一个root下的两个子树,每个子树都和前面的运算一下再加进去对于这种需要排序的运算很麻烦,所以考虑先不去同子树内点对的算出合法点对个数,然后减去每一棵子树内的合法点对(它们实际上是不合法的,相当 ...
- 二分优化的lis
/*此题为一个女大佬教我的,%%%%%%%%%%%%*/ 题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为 ...