Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
绝世唐门三哥
Vue Manage System
提交
b0a8a2da
Vue Manage System
项目概览
绝世唐门三哥
/
Vue Manage System
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Vue Manage System
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b0a8a2da
编写于
2月 20, 2017
作者:
L
lin-xin
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Complete upload component
上级
1bdfc745
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
41 addition
and
1 deletion
+41
-1
src/components/page/Upload.vue
src/components/page/Upload.vue
+41
-1
未找到文件。
src/components/page/Upload.vue
浏览文件 @
b0a8a2da
...
...
@@ -6,6 +6,25 @@
<el-breadcrumb-item>
图片上传
</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div
class=
"content-title"
>
支持拖拽
</div>
<div
class=
"plugins-tips"
>
Element UI自带上传组件。
访问地址:
<a
href=
"http://element.eleme.io/#/zh-CN/component/upload"
target=
"_blank"
>
Element UI Upload
</a>
</div>
<el-upload
action=
"/api/posts/"
type=
"drag"
:thumbnail-mode=
"true"
:on-preview=
"handlePreview"
:on-remove=
"handleRemove"
:on-error=
"handleError"
:default-file-list=
"fileList"
>
<i
class=
"el-icon-upload"
></i>
<div
class=
"el-dragger__text"
>
将文件拖到此处,或
<em>
点击上传
</em></div>
<div
class=
"el-upload__tip"
slot=
"tip"
>
只能上传jpg/png文件,且不超过500kb
</div>
</el-upload>
<div
class=
"content-title"
>
支持裁剪
</div>
<div
class=
"plugins-tips"
>
Vue-Core-Image-Upload:一款轻量级的vue上传插件,支持裁剪。
访问地址:
<a
href=
"https://github.com/Vanthink-UED/vue-core-image-upload"
target=
"_blank"
>
Vue-Core-Image-Upload
</a>
...
...
@@ -16,7 +35,8 @@
text=
"上传图片"
url=
"/api/posts/"
extensions=
"png,gif,jpeg,jpg"
v-on:imageuploaded=
"imageuploaded"
></vue-core-image-upload>
@
:imageuploaded=
"imageuploaded"
@
:errorhandle=
"handleError"
></vue-core-image-upload>
</div>
</
template
>
...
...
@@ -26,6 +46,7 @@
data
:
function
(){
return
{
src
:
'
../../../static/img/img.jpg
'
,
fileList
:
[]
}
},
components
:
{
...
...
@@ -35,11 +56,30 @@
imageuploaded
(
res
)
{
console
.
log
(
res
)
},
handleRemove
(
file
,
fileList
)
{
console
.
log
(
file
,
fileList
);
},
handlePreview
(
file
)
{
console
.
log
(
file
);
},
handleError
(){
this
.
$notify
.
error
({
title
:
'
上传失败
'
,
message
:
'
图片上传接口上传失败,可更改为自己的服务器接口
'
});
}
}
}
</
script
>
<
style
>
.content-title
{
font-weight
:
400
;
line-height
:
50px
;
margin
:
10px
0
;
font-size
:
22px
;
color
:
#1f2f3d
;
}
.pre-img
{
width
:
250px
;
height
:
250px
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录