drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Upload

Browse source 
update Upload
This commit is contained in:
梁灏 2017-01-22 17:19:37 +08:00
parent bc3bcb098b
commit a6ac0a7603
3 changed files with 133 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/upload/upload.vue
View file

@ -202,6 +202,24 @@
} }
}, },
post (file) { post (file) {
// check format
if (this.format.length) {
const _file_format = file.name.split('.').pop().toLocaleLowerCase();
const checked = this.format.some(item => item.toLocaleLowerCase() === _file_format);
if (!checked) {
this.onFormatError(file);
return false;
}
}
// check maxSize
if (this.maxSize) {
if (file.size > this.maxSize * 1024) {
this.onExceededSize(file);
return false;
}
}
this.handleStart(file); this.handleStart(file);
let formData = new FormData(); let formData = new FormData();
formData.append(this.name, file); formData.append(this.name, file);
@ -235,24 +253,6 @@
showProgress: true showProgress: true
}; };
// check format
if (this.format.length) {
const _file_format = _file.name.split('.').pop().toLocaleLowerCase();
const checked = this.format.some(item => item.toLocaleLowerCase() === _file_format);
if (checked) {
this.onFormatError(file);
return;
}
}
// check maxSize
if (this.maxSize) {
if (_file.size > this.maxSize * 1024) {
this.onExceededSize(file);
return;
}
}
this.fileList.push(_file); this.fileList.push(_file);
}, },
getFile (file) { getFile (file) {

4
src/styles/components/upload.less
View file

@ -16,7 +16,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
& + span{ & > span{
cursor: pointer; cursor: pointer;
transition: color @transition-time @ease-in-out; transition: color @transition-time @ease-in-out;
i{ i{
@ -30,7 +30,7 @@
&:hover{ &:hover{
background: @input-disabled-bg; background: @input-disabled-bg;
& + span{ & > span{
color: @primary-color; color: @primary-color;
i{ i{
color: @text-color; color: @text-color;

157
test/routers/upload.vue
View file

@ -1,56 +1,125 @@
<template> <template>
<div style="margin: 50px;width: 300px;"> <div class="demo-upload-list" v-for="item in uploadList">
<Upload <template v-if="item.status === 'finished'">
action="//jsonplaceholder.typicode.com/posts/" <img :src="item.url">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click="handleView(item.name)"></Icon>
<Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
<Upload
v-ref:upload
:show-upload-list="false"
:default-file-list="defaultList"
:on-success="handleSuccess"
:format="['jpg','jpeg','png']"
:max-size="2048"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
multiple multiple
type="drag" type="drag"
:max-size="10000" action="//jsonplaceholder.typicode.com/posts/"
:default-file-list="defaultFileList"> style="display: inline-block;width:58px;">
<div style="padding: 40px 100px"> <div style="width: 58px;height:58px;line-height: 58px;">
<i-button>上传</i-button> <Icon type="camera" size="20"></Icon>
</div> </div>
<!--<div slot="tip">只能上传 jpg/png 格式的文件</div>--> </Upload>
</Upload> <Modal title="查看图片" :visible.sync="visible">
</div> <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
</Modal>
</template> </template>
<script> <script>
export default { export default {
props: {},
data () { data () {
return { return {
defaultFileList: [ defaultList: [
{ {
'name': 'Vue.js权威指南.zip', 'name': 'a42bdcc1178e62b4694c830f028db5c0',
'url': 'http://www.baidu.com' 'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'
}, },
{ {
'name': 'Vue.js权威指南.doc', 'name': 'bc7521e033abdd1e92222d733590f104',
'url': 'http://www.baidu.com' 'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'
}, }
{ ],
'name': '套马的汉子.mp3', imgName: '',
'url': 'http://www.baidu.com' visible: false
}, }
{
'name': '风景.jpg',
'url': 'http://www.baidu.com'
},
{
'name': 'Vue.js权威指南.mp4',
'url': 'http://www.baidu.com'
},
{
'name': '套马的汉子.csv',
'url': 'http://www.baidu.com'
},
{
'name': '风景.ppt',
'url': 'http://www.baidu.com'
},
]
};
}, },
computed: {}, computed: {
methods: {} uploadList () {
}; return this.$refs.upload ? this.$refs.upload.fileList : [];
</script> }
},
methods: {
handleView (name) {
this.imgName = name;
this.visible = true;
},
handleRemove (file) {
// 从 upload 实例删除数据
const fileList = this.$refs.upload.fileList;
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
},
handleSuccess (res, file) {
// 因为上传过程为实例，这里模拟添加 url
file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
file.name = '7eb99afb9d5f317c912f08b5212fd69a';
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
}
}
}
</script>
<style>
.demo-upload-list{
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0,0,0,.2);
margin-right: 4px;
}
.demo-upload-list img{
width: 100%;
height: 100%;
}
.demo-upload-list-cover{
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
display: block;
}
.demo-upload-list-cover i{
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
</style>