elementui upload上传,文件上传elementUI中upload
本文主要介绍使用Elementel-upload上传组件的详细说明，通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
目录
基本用途上传文件数量上传格式及大小限制上传过程中的各种挂钩显示上传文件列表。上传时，数据选择和上传是分开处理的。上传是前端开发中的常用功能，Vue开发中常用的Element组件库也提供了非常有用的上传组件。
基本用法
代码：
El-upload:action= uploadActionUrl
El-button size= small type= primary 点击上传/el-button。
/El-上传
基本上不言而喻：action是执行上传动作的后台界面，el-button是触发上传的按钮。
上传文件数量
首先，设置是否可以选择多个文件同时上传。这也是输入类型=file 的属性。只需添加多个。此外，el-upload组件还提供了：limit属性，用于设置可以上传的最大文件数，超过该值，所选文件将不会被上传。on-exceed绑定的方法是在数量超过后处理动作。代码如下：
El-上传
:action=uploadActionUrl
多个的
:limit=3
:on-exceed=handleExceed
El-button size= small type= primary 点击上传/el-button。
/El-上传
上传格式及大小限制
如果需要限制上传文件的格式，需要添加accept属性。这与直接输入type=file 的属性相同。accept属性的值可以是accept= image/gif，image/JPEG，text/plain，application/pdf 等等。文件格式，可以使用slot。代码如下：
El-上传
:action=uploadActionUrl
accept=image/jpeg，image/gif，image/png
多个的
:limit=3
:on-exceed=handleExceed
El-button size= small type= primary 点击上传/el-button。
div slot= tip class= El-upload _ _ tip 请上传图片格式文件/div
/El-上传
请注意，选择文件时仅限制格式。事实上，用户仍然可以点击“所有文件”选项，上传其他格式的文件。如果上传时需要再次检查，需要在钩子中绑定相应的方法：before-upload来检查。代码如下：
El-上传
:action=uploadActionUrl
accept=image/jpeg，image/gif，image/png
:before-upload=onBeforeUpload
多个的
:limit=3
:on-exceed=handleExceed
El-button size= small type= primary 点击上传/el-button。
div slot= tip class= El-upload _ _ tip 请上传图片格式文件/div
/El-上传
.
onBeforeUpload(文件)
{
const is image=file . type=== image/JPEG image/gif image/png ；
const islt 1m=file . size/1024/1024 1；
如果(！isIMAGE) {
这个。$message.error(上传的文件只能是图片格式！);
}
如果(！isLt1M) {
这个。$message.error(上传的文件大小不能超过1MB！);
}
return isIMAGE isLt1M
}
这里，在限制文件格式的同时，还要检查文件大小。
上传过程中的各种钩子
下面是直接办理官网的说明，如图：
显示已上传文件列表
这个功能可以说是非常强大了，可以清晰的显示上传文件列表，还可以轻松删除上传新文件。
代码：
El-上传
:action=uploadActionUrl
accept=image/jpeg，image/gif，image/png
多个的
:limit=3
:on-exceed=handleExceed
:on-error=uploadError
:on-success=uploadSuccess
:on-remove= onremovext
:before-upload=onBeforeUpload
:file-list=files
El-button size= small type= primary 点击上传/el-button。
div slot= tip class= El-upload _ _ tip 请上传图片格式文件/div
/El-上传
方法是添加属性file-list=files ，其中files是一个绑定的数组对象，最初为空。
效果如下：
上传时提交数据
上传文件同时需要提交数据给后台接口，这时就要用到：数据属性。
埃尔-上传
:action=uploadActionUrl
accept=image/jpeg，image/gif，image/png
多个的
:limit=3
:data=uploadData
:on-exceed=handleExceed
:on-error=uploadError
:on-success=uploadSuccess
:on-remove= onremovext
:before-upload=onBeforeUpload
:file-list=files
El-button size= small type= primary 点击上传/el-button
div slot= tip class= El-upload _ _ tip 请上传图片格式文件/div
/El-上传
.
上传数据：{
数据类型："0",
旧文件路径：""
}
选取和上传分开处理
有时我们需要把选取和上传分开处理，比如上传图片，先选取文件提交到前端，图片处理后再把base64内容提交到后台。
代码如下：
埃尔-上传
操作=
accept=image/jpeg，image/gif，image/png
:on-change=onUploadChange
：自动上传=假
:show-file-list=false
埃尔按钮槽=触发器大小=小类型=主要选取/el-button
El-button style= margin-left:10px；size= small type= success @ click= submit upload 上传/el-button
/El-上传
.
提交上传()
{
console.log(提交)
},
onUploadChange(文件)
{
const是image=(file。生的。type=== image/JPEG file。生的。type=== image/png file。生的。type=== image/gif )；
const islt 1m=file。尺寸/1024/1024 1；
如果(!isIMAGE) {
这个message.error(上传文件只能是图片格式!);
返回错误的
}
如果(!isLt1M) {
这个message.error(上传文件大小不能超过1MB！);
返回错误的
}
var reader=new FileReader()；
读者。readasdataurl(文件。raw)；
reader.onload=函数(e){
console.log(this.result)//图片的base64数据
}
}
效果如图：
到此这篇关于元素埃尔-上传上传组件使用详解的文章就介绍到这了，更多相关元素埃尔-上传上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。