element-ui el-upload 文件上传 解读
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
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 可选参数, 文件上传成功时的钩子
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献8条内容
所有评论(0)