上传组件 的时候 看进度的时候 不要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. [laravel]要点

    1. routing 2. Ioc 3. Facade 4. Artisan 1.routing 参考:http://laravel.com/docs/4.2/routing 了解routing之前先 ...

  2. uploadify提示修改为中文

    使用uploadify时报错时是英文提示,并且上传文件进度条显示的是英文,如何修改为中文呢,直接打开jquery.uploadify.min.js(如果你使用的是jquery.uploadify.js ...

  3. 【WIP】swift3的timer的用法

    创建: 2017/10/14   更新: 2017/10/14 标题加上[WIP],补充创建时间     回家再写

  4. lightoj1169【DP】

    题意(来自大哥): 有两栋楼,左边一栋,右边一栋,层数从1-n,地面的标号为0,每一层有一个水果.有一只猴子在地面上,他现在要上到n层去,在第i层会吃掉水果花费一定时间. 猴子有两种方式从第i层到i+ ...

  5. POJ3264【线段树】

    求区间最值-(基础,继续) code---.. #include<cstdio> #include<iostream> #include<string.h> #in ...

  6. hdoj1116【欧拉回路】

    题意: 应该是求一个路径让所有的单词能够首尾连起来,不需要头和尾的单词也连起来...应该很容易懂吧...我这里讲的好烂.. 思路: 从欧拉回路的定义引申过来. 1. 连通. 2. 入度和出度问题. 问 ...

  7. bzoj 2882: 工艺【SAM】

    看上去比较SA,但是在学SAM所以就用SAM来做-- 把串复制一遍接在后面,对这个新串求SAM(这里的儿子节点要用map转移),然后从根节点每次都向最小的转移走,这样走n次转移的串就是答案 #incl ...

  8. bzoj 1049: [HAOI2006]数字序列【dp+二分+瞎搞】

    第一问明显就是用b[i]=a[i]-i来做最长不下降子序列 然后第二问,对于一对f[i]=f[j]+1的(i,j),中间的数一定要改的,并且是等于b[i]或者b[j],我不会证,然后因为是随机数据,所 ...

  9. (2)javascript的基本语法、数据结构、变量

    本篇学习资料主要讲解javascript的基本语法.数据结构.变量      无论是传统的编程语言,还是脚本语言,都具有数据类型.常量和变量.运算符.表达式.注释语句.流程控制语句等基本元素构成,这些 ...

  10. YCOJ-DFS

    DFS搜索是搜索中的一种,即深度优先搜索(Depth First Search),其过程简要来说是对每一个可能的分支路径深入到不能再深入为止,而且每个节点只能访问一次. 图示: 如图,这是邻接矩阵,我 ...