element的upload,element ui upload
这篇文章主要介绍了某视频剪辑软件使用元素埃尔-上传组件的相关知识，在研究学习基本使用的过程中遇到很多问题，今天特此把问题记录分享到我们平台，需要的朋友可以参考下
目录
一、基本使用二、图片数量控制三、图片格式限制/可以选中多张图片补充：在某视频剪辑软件项目中使用元素-用户界面的上传上传组件
一、基本使用
最近研究了一下埃尔-上传组件踩了一些小坑写起来大家学习一下
很经常的一件事情经常会去直接拷贝元素的的组件去使用但是用到上传组件时就会遇到坑了
如果你直接去使用上传你肯定会遇见这个错误
而且上传的图片可能会突然消失这时候如果你没有接口你是完全不知道为什么移除的所以无接口时只能去猜测是不是因为跨域报错导致图片消失
最终去拿公司的地址调完接口，答案是对的action= https://jsonplaceholder。typicode。 com/posts/这是元素中的行为参数用超文本标记语言时他会去调用创建交互式、快速动态网页应用的网页开发技术使同源策略不同导致报错。
一般呢公司都会提供一个转图片为全球资源定位器(统一资源定位器)格式的地址链接你只需要去调用它保存下来就好了，但是可能会遇到需要代币权限，这时候很少去做的事情来了，一般没有去直接通过组件带令牌，所以要通过埃尔-上传组件去携带代币
埃尔-上传
action=https://xxxx地址
:headers=importHeaders
/El-上传
从" @/utils/token "导入getToken
data() {
返回{
导入标头：{ token:getToken()}，
};
},
二、图片数量控制
埃尔-上传
action= https://安全。兄弟优先。 cn/API/common/upload
:headers=importHeaders
:limit=limit
:on-exceed=masterFileMax
i class=el-icon-plus/i
/El-上传
//最多上传几张图片
masterFileMax(文件，文件列表){
console.log(文件，文件列表);
这个$消息。警告(` n请最多上传${this.limit}个文件。`);
},
三、图片格式限制/可以选中多张图片
埃尔-上传
接受=。JPG .PNG，100 .JPEG，1000 .jpg，1000 .巴布亚新几内亚，2007年 jpeg
多个的
i class=el-icon-plus/i
/El-上传
例子
埃尔-上传
action=https://xxxx
:headers=importHeaders
list-type=图片卡
:on-preview= handlePictureCardPreview
:on-remove=handleRemove
:on-success= handleAvatarSuccess
:limit=limit
:on-exceed=masterFileMax
接受=。JPG .PNG，100 .JPEG，1000 .jpg，1000 .巴布亚新几内亚，2007年 jpeg
多个的
i class=el-icon-plus/i
/El-上传
脚本
从" @/utils/token "导入getToken
导出默认值{
名称："反馈",
data() {
返回{
导入标头：{ token:getToken()}，
图像：[],
限制：9
};
},
方法：{
//删除图片
手柄移除(文件，文件列表){
const idx=this。图像。查找索引(it=it===文件。回应。数据。完整网址)
this.images.splice(idx，1)
},
handlePictureCardPreview(文件){
这个。dialogimageurl=file。网址；
this.dialogVisible=true
},
//上传成功后的数据
handleAvatarSuccess(响应，文件，文件列表){
console.log(响应、文件、文件列表);
if(response.code===1){
这个。图像。推(回应。数据。完整网址)
}
},
//最多上传几张图片
masterFileMax(文件，文件列表){
console.log(文件，文件列表);
这个$消息。警告(` n请最多上传${this.limit}个文件。`);
}
}
};
/脚本
补充：在vue项目中使用element-ui的Upload上传组件
埃尔-上传
五-否则
class=确保安全
:action=importFileUrl
:data=upLoadData
name=importfile
:onError=uploadError
:onSuccess=uploadSuccess
:上传前= beforeAvatarUpload
El-button size= small type= primary 确定/el-button
其中importFileUrl是后台接口，上传数据是上传文件时要上传的额外参数，上传错误是上传文件失败时的回掉函数，上传成功是文件上传成功时的回掉函数，在AvatarUpload之前是在上传文件之前调用的函数，我们可以在这里进行文件类型的判断。
data () {
导入文件URL:“http:DTC。 com/cpy/add ，
上传数据：{
cpid:“123456”，
发生时间："2017-08"
}
},
方法：{
//上传成功后的回调
上传成功（响应、文件、文件列表){
console.log(上传文件，响应)
},
//上传错误
上传错误(响应、文件、文件列表){
console.log(上传失败，请重试!)
},
//上传前对文件的大小的判断
在AvatarUpload之前(文件){
const extension=file.name.split( . )[1]===xls
常量扩展名2=文件。姓名。拆分( . )[1]===xlsx
常量扩展名3=文件。姓名。拆分( . )[1]===doc
常量扩展名4=文件。姓名。拆分( . )[1]===docx
const islt 2m=文件。尺寸/1024/1024 10
如果(!延伸！分机2!分机3!扩展4) {
console.log(上传模板只能是xls、xlsx、doc、docx格式!)
}
如果(!isLt2M) {
console.log(上传模板大小不能超过10MB！)
}
返回分机分机2 分机3 分机isLt2M
}
}
到此这篇关于某视频剪辑软件使用元素埃尔-上传组件的文章就介绍到这了，更多相关某视频剪辑软件元素埃尔-上传组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。