upload标签

upload标签本身支持上传功能，使用upload标签上传文件时就不需要自己在进行发送请求。

默认请求方法为post请求
请求路径为：action（后端接收文件的接口地址）
请求头为：headers（程序用token作为鉴权依据，通常把token放在header中）
上传成功回到方法为：on-success = “具体的回调方法”
上传失败回调方法为：on-error = “具体的回调方法”

以下为标签的具体属性与方法

          <Uploadstyle="display:inline-block;":action="commonUrl + '/common/common/upload/file'":headers="accessToken":on-success="handleSuccess":on-error="handleError":show-upload-list="false":max-size="2048":on-exceeded-size="handleMaxSize"multipleref="up"><Button type="primary">上传文件</Button></Upload>

以下代码为属性调用方法书写语法语法

 // 上传文件超过大小限制handleMaxSize(file) {this.$Notice.warning({title: "文件大小过大",desc: "所选文件大小过大, 不得超过 1M.",});},// 上传成功回调handleSuccess(res, file) {if (res.success) {this.$Message.success("上传文件 " + file.name + " 成功");this.getDataList();} else {this.$Message.error(res.message);}},// 上传失败回调handleError(error, file, fileList) {this.$Message.error(error.toString());},

element UI 的upload标签的使用

<el-col :span="12"><el-form-item label="附件" prop="attachments"><el-uploadclass="upload"name="file":action="doUpload":headers="headers":before-remove="beforeRemove":limit="3":on-exceed="handleExceed":before-upload="handleBeforeUpload":on-success="uploadSuccess":multiple="true":file-list="fileList"><el-button type="text" size="small" icon="el-icon-upload">点击上传</el-button></el-upload></el-form-item></el-col>

class：可以修改样式
name：name很重要，错了后台接收不到文件，官方的解释的是上传的文件字段名 ,就是后端对应的接口参数的名字
multiple：是否支持选择多个文件
file-list：在查看数据的时候，要回显已经上传的文件，需要设置这个属性

前端upload标签使用方法相关推荐

cmdb python 采集虚拟机_Python编程(三十四)：CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...
一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...
WEB前端性能优化常见方法
web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是 ...
前端JS常用工具方法
前端JS常用工具方法 // var ua = window.navigator.userAgent.toLowerCase(); /*** 前端JS常用工具方法* @class Tools*/ exp ...
前端link标签引入css教程
前端link标签引入css教程首先我们在桌面新建一个文件我们在这个文件里分别新建个存放HTML的文件夹以及css层叠样式表格的文件夹然后我们打开dw,在文件选项找到新建我们新建一个HTML的的 ...
vue修改meta值_vue中动态设置meta标签和title标签的方法
vue中动态设置meta标签和title标签的方法因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 ...
html标签触发方法，标签绑定事件
html标签触发方法,标签绑定事件 1. js脚本里面通过ID绑定 $('#标签ID').click(function () {}) $('#标签ID')就是通过标签ID拿到了标签,下面无论是触发点击 ...
前端img标签展示tiff格式图片
前端img标签展示tiff格式图片下面展示一些内联代码片. *html<el-form-item label="参考图片"><img id="img ...
html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...

前端upload标签使用方法

upload标签

element UI 的upload标签的使用

前端upload标签使用方法相关推荐

最新文章

热门文章