element ui 上传文件,element ui 上传
图片和文件上传在很多项目中都可以使用的到，本文主要介绍了VUE元素-用户界面文件上传的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
图片上传（图像裁剪器)文件上传(El-上传)注意
图片上传（ImageCropper）
此前端代码自己封装了文件上传，只需要配置后端接口需求统一资源定位器以及对应的图片上传成功后的处理函数，后端返回战略情报局生成的图片访问地址，然后cropsuccess函数将上传成功的图像进行显示。
模板
div class=应用程序容器
！-讲师头像-
El-表单-项目标签=讲师头像
！-头衔缩略图-
pan-thumb:image=老师。阿凡达/
！-文件上传按钮-
埃尔按钮类型=主要图标=el图标-上传
@click=imagecropperShow=true 更换头像
/el-button
！-
虚拟展示：是否显示上传组件
：键：类似于id，如果一个页面多个图片上传控件，可以做区分
:url:后台上传的全球资源定位器(统一资源定位器)地址
@close:关闭上传组件
@ crop-上传-成功：上传成功后的回调
领域就是起名字作用，值要与后端接口的参数一致
-
图像裁剪器
v-show=imagecropperShow
：宽度=300
：高度=300
:key=imagecropperKey
:url=BASE_API /eduoss/fileoss
field=file
@close=close
@ crop-upload-success= crop success /
/El-表单-项目
/div
/模板
脚本
//引入调用应用程序接口层：教师。射流研究…文件
从" @/组件/图像裁剪器"导入图像裁剪器
从" @/components/PanThumb "导入潘通布
导出默认值{
组件：{ ImageCropper，PanThumb }，
data() {
返回{
老师：{},
saveBtnDisabled:false，//保存按钮是否禁用
imagecropperKey:0，//上传组件键值
图像交叉显示：假，
BASE_API:process.env.BASE_API，//获取开发环境射流研究…里面地址
saveBtnDisabled:false //保存按钮是否禁用，
}
},
方法：{
close() { //关闭上传弹框的方法
this.imagecropperShow=false
//上传组件初始化：防止不能连续上传修改头像
这个。imagecropperkey=this。imagecropperkey 1
},
//上传成功后的方法
cropSuccess(数据){
this.imagecropperShow=false
//上传之后，后端接口返回数据（网址)类似反应
this.teacher.avatar=data.url
//上传组件初始化
这个。imagecropperkey=this。imagecropperkey 1
},
}
}
/脚本
文件上传（el-upload）
模板
div class=应用程序容器
埃尔表单标签-宽度= 120像素
El-表单-项目标签=信息描述
el-tag type=infoexcel模版说明/el-tag
el-tag
i class=el-icon-download/
答：href=/static/01.xlsx 点击下载模版/a
/el-tag
/El-表单-项目
El-表单-项目标签=选择 Excel
埃尔-上传
ref=上传
：自动上传=假
:on-success=fileUploadSuccess
:on-error=fileUploadError
:disabled=importBtnDisabled
:limit=1
:action= BASE _ API /edu服务/主题/添加主题
name=file
接受=应用程序/vnd。openxml格式-office文档。电子表格ml。工作表
埃尔按钮槽=触发器大小=小类型=主要选取文件/el-button
埃尔按钮
:loading=loading
style= margin-left:10px；
大小=小
类型=成功
@click=submitUpload 上传到服务器/el-button
/El-上传
/El-表单-项目
/el格式
/div
/模板
脚本
导出默认值{
data() {
返回{
BASE_API: process.env.BASE_API，//接口应用程序接口地址
ImportBtnDisabled: false，//按钮是否禁用，
加载：假
}
},
已创建(){
},
方法：{
//点击按钮，将文件上传到界面。
submitUpload() {
this.importBtnDisabled=true
this.loading=true
//js:document . getelementbyid( upload )。提交()
这个。$refs.upload.submit()
},
//上传成功
文件上传成功(响应){
//提示信息
this.loading=false
这个。$message({
类型：“成功”，
消息：“课程分类添加成功”
})
//跳转到课程分类列表
//路由跳转
这个。$ router . push({ path:/subject/list })
},
//上传失败
fileUploadError() {
this.loading=false
这个。$message({
类型：“错误”，
消息：“添加课程分类失败”
})
}
}
}
/脚本
注意
name属性的值应该与后端接口参数MultipartFile的变量名一致，否则无法映射匹配值。
前端标识符属性值与后端参数名(实体类中的属性名)一致，否则无法直接映射参数，导致后端收不到数据。
这就是这篇关于上传VUE元素ui文件的文章。有关上传VUE元素ui文件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。