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 ...
随机推荐
- sizeof()解析(原)
(一)基本概念 sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是一个表达式或括在括号内的类型名.操作数的存储大小由操作数的类型决定. (二)使用方法 1.用于数据类型 ...
- Android应用开发完全退出程序的通用方法
在开发一个android应用时,有可能有N个Activity,而在每个Activity里的菜单里有个"退出程序"菜单,这里就要完全退出程序了,所以今天给大家分享的是Android应 ...
- Codechef SEPT17
Codechef SEPT17 比赛链接:https://www.codechef.com/SEPT17 CHEFSUM code给定数组 a[1..n] ,求最小的下标 i ,使得 prefixsu ...
- k8s-存储卷2-configMap-Secret-十三
一.StorageClass 在前一篇文章中,手动定义了pv,并让pvc关联至pv:现实中在pvc申请存储空间时,未必就有现成的pv符合pvc申请的需求,该怎么办呢? Kubernetes提供了描述存 ...
- python学习笔记1-基础语法
1 在3版本中print需要加上括号2 多行语句:用\连接 item_one=1 item_two=2 item_three=3 total = item_one + \ item_two + \ i ...
- Android 布局之GridLayout(转载)
转载:http://www.cnblogs.com/skywang12345/p/3154150.html 1 GridLayout简介 GridLayout是Android4.0新提供的网格矩阵形式 ...
- PhpStorm之服务器篇
打开编辑器,依次点击 Tools->Deloyment->Configuration,进入连接服务器的配置页面 2.点击左上角的 + ,配置一个新的服务器 3.填写添加之后服务器的名称,并 ...
- Java class不分32位和64位
1.32位JDK编译的java class在32位系统和64位系统下都可以运行,64位系统兼容32位程序,可以理解.2.无论是Linux还是Windows平台下的JDK编译的java class在Li ...
- Centos 内存释放
原因:最近发现服务器老师提示内存不足的警报,很多时候内存都占用百分之80以上,查看运行的服务似乎并没有占用很大的内存,top查看运行的服务,然后按shift+m排名第一的才百分之1.x,看了别人的博客 ...
- bryce1010专题训练——划分树
1.求区间第K大 HDU2665 Kth number /*划分树 查询区间第K大 */ #include<iostream> #include<stdio.h> #inclu ...