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 ...
随机推荐
- win7Setx修改环境变量
SETX.exe (Resource Kit, Windows 7) Set environment variables permanently, SETX can be used to set En ...
- margin---bug
常见的浏览器下margin出现的bug IE6中双边距Bug:发生场合:当给父元素内第一个浮动元素设置margin-left(元素float:left)或margin-right(元素float:ri ...
- 出现ImportError: No module named win32api异常
ImportError: No module named win32api出现异常 实际是需要安装和自己python兼容的win32all 在http://starship.python.net/cr ...
- 039--CSS
一.CSS定义 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ... propert ...
- liteos内存(三)
1. 概述 1.1 基本概念 内存管理模块管理系统的内存资源,它是操作系统的核心模块之一.主要包括内存的初始化.分配以及释放. 在系统运行过程中,内存管理模块通过对内存的申请/释放操作,来管理用户和O ...
- J20170426-hm
ジェネリクス Generics 泛型 バルーン balloon 气球 アングルブラケット Angle bracket 尖括号 プレースホルダ Placeholder 占位符
- poj1511【最短路spfa】
题意: 计算从源点1到各点的最短路之和+各点到源点1的最短路之和: 思路: 源点这个好做啊,可是各点到源点,转个弯就是反向建边然后求一下源点到各点的最短路,就是各点到源点的最短路,在两幅图里搞: 贴一 ...
- hdu 3038 How Many Answers Are Wrong【带权并查集】
带权并查集,设f[x]为x的父亲,s[x]为sum[x]-sum[fx],路径压缩的时候记得改s #include<iostream> #include<cstdio> usi ...
- P1226神经网络
提交了7次,看了无数题解,要死啊~~~.(无限吐槽这道题...) 据说是Toposort,我其实也不是很清楚,反正BFS就可以过:写题之前先把题看懂: 根据公式,因为入度为零的点不会被传递,所以阈值是 ...
- Hadoop Hive概念学习系列之HDFS、Hive、MySQL、Sqoop之间的数据导入导出(强烈建议去看)
Hive总结(七)Hive四种数据导入方式 (强烈建议去看) Hive几种数据导出方式 https://www.iteblog.com/archives/955 (强烈建议去看) 把MySQL里的数据 ...