关闭

element-ui el-upload 文件上传 解读

1041人阅读 评论(0) 收藏 举报
分类:

el-upload上传
在标签上可以配置,这里推荐v-bind 动态绑定方法
参数action后面写上传到服务器端的地址(地址)

<el-upload
    class="avatar-uploader"
    ref="upload"
    list-type="picture-card"
    :action="iconImageUrl"
    :data="{fileType: form.class}"
    :file-list="[{url: form.image}]"
    :on-success="handleUploadSuccess"
    :on-remove="handleRemoveCover"
    :before-upload="beforeImageUpload">            
    <i class="el-icon-plus"></i>
</el-upload>

data参数是专门配置上传时所需的参数的。这里也用了动态绑定的方法。
在data里面定义了class。相当于配置了 fileType=category 这样的参数名和参数值
“`
form: {
class: ‘category’,
categoryName: ”,
introduction: ”,
sortShow: 0,
image: ”,
id: ”
},

on-change   可选参数, 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

当然file和fileList也有用。

比如

handleRemove(file, fileList) {
console.log(file, fileList);
}
“`
这里的file是个对象,里面包含图片的一些信息。我们可以拿到file对象中的一些信息,包括图片的name,size,url 等等信息

on-remove 可选参数, 文件列表移除文件时的钩子
on-success 可选参数, 文件上传成功时的钩子

0
0
查看评论

在vue项目中使用element-ui的Upload上传组件

<el-upload v-else class='ensure ensureButt' :action="importFileUrl" :...
  • qq_39685062
  • qq_39685062
  • 2017-08-10 10:19
  • 11193

使用elementUI实现将图片上传到本地

查阅饿了吗官方文档可以了解上传组件的使用方法。http://element.eleme.io/#/zh-CN/component/upload 前台的页面代码为: <el-upload class="upload-demo" ...
  • qq_36752632
  • qq_36752632
  • 2017-09-08 17:42
  • 5408

Element-ui框架修改-upload、step

Element-ui框架修改-2017.09.04 【upload】 需求-照片墙只上传一张,上传之后上传按钮消失 修改地址-Packages-upload-src-index  添加方法 hidePictureCardUpload() { document.getElem...
  • qing_huan_wei_er
  • qing_huan_wei_er
  • 2017-09-04 17:21
  • 1869

七牛云图片上传:使用element-ui的upload组件

昨天问了一下element团队,他们还没有试过用element-ui的upload组件传图片到七牛云 我试了一天发现没问题,同时觉得七牛并没有一个前端后端流程都演示到的demo,于是再次记录一波 流程 后端配置好七牛相关的accessKey后端构建好上传策略,用来生成消费次数只有1...
  • lupeng0206
  • lupeng0206
  • 2017-05-04 19:31
  • 10181

VUE2.0 element upload使用

<template> <div class="uptemp"> <el-upload class="upload-demo" ref="upload" multi...
  • m0_38069630
  • m0_38069630
  • 2017-09-29 11:29
  • 2330

Vue 之Element ui 中upload的那些事

最近在适用VUE作为前端框架做自己的项目,在做到需要上传文件到服务器时,同事告诉我upload之中的action也就是上传地址不能动态的去更改,然后去看了一下,需要做以下处理才能动态的使用:action是一个必填参数,且其类型为string,我们把action写成:action,然后后面跟着一个方法...
  • Longyu144714
  • Longyu144714
  • 2017-09-27 11:16
  • 3251

ElementUI案例演示:导航、布局、加载动画

知识点1.vue-router之嵌套路由 http://router.vuejs.org/zh-cn/essentials/nested-routes.html 2.element-ui 导航组件、布局组件、加载动画 http://element.eleme.io/#/zh-CN/compo...
  • github_26672553
  • github_26672553
  • 2016-12-08 14:02
  • 68046

vue-router配合ElementUI实现导航

在每个项目中路由是不可或缺的,最近学习vue-router和ElementUI配合使用实现导航栏,在学习的过程中遇到一个问题:点击浏览器的刷新之后页面停留在原来的位置,但是导航却是默认第一个。由于接触前端时间不长,对于路由的概念不是特别清楚,按照文档写了之后完全不知道怎么下手了,请教了同事,同事的解...
  • weixin_35798126
  • weixin_35798126
  • 2017-07-01 21:29
  • 7681

UI upload多文件上传

UI upload多文件上传   cs: using System; using System.Collections; using System.ComponentModel; using System.Data; using System.Drawing; using...
  • GoodShot
  • GoodShot
  • 2012-11-09 14:37
  • 1606

element UI+七牛云快速搭建图片服务器

最进在做网站的后台管理功能,需要能够对数据库的文章进行“增,删,改,查”,但是遇到了图片保存的问题,如果采用前端上传图片至后端,然后后端保存,数据库存储图片的相对路径,这种方式感觉有点麻烦,于是就在寻求更简单的解决方案,那么有没有一种前端上传图片存储,直接返回图片外链的解决方案呢?​ 最终,我选择了...
  • xu90868075
  • xu90868075
  • 2017-05-17 23:40
  • 4067
    个人资料
    • 访问:19923次
    • 积分:673
    • 等级:
    • 排名:千里之外
    • 原创:48篇
    • 转载:0篇
    • 译文:0篇
    • 评论:5条
    文章分类
    最新评论