<el-upload
class="upload-demo"

name="targetFile"

ref="upload"

:with-credentials="true"
:limit="5"
:file-list="fileList"
:data="myData"
:action="uploadUrl()"
:headers="myHeader"
:on-change="addFile"
:on-remove="removeFile"
:auto-upload="false"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
---------------------
element-ui文件上传过程中,遇到的问题

首先搞清楚文件上传一般的请求方式都是post请求

请求携带的参数是通过name属性来指定键名的:例如 name="targetFile"

ref绑定的是当前文件上传表单,将来可以通过this.$refs.upload.submit()请求上传文件的URL

:with-credentials="true"代表支持发送 cookie 凭证信息

:limit代表最大支持的文件上传个数

:file-list 是自己上传的文件列表,里面包含了自己上传的文件

:data设置上传携带的其他数据例如id,type

:headers设置请求头一般设置的是token值(在vue的计算属性中添加)

:action是指后台提交的地址

:on-change会在文件添加的时候去掉用addFile方法

:on-remove文件列表移除文件时的钩子

:auto-upload是否自动提交,取值为布尔值

当遇到有的时候文件上传是包含在一个表单里面,使用element-ui的upload上传组件,想实现的是在我点击上传选择文件后不让它自动提交,而是在我点击确定后,经过一系列的验证再提交。而且element-ui的upload组件上传的路径跟表单保存的路径是不一样的

这个过程中的注意点:

1.文件上传的地址和表单提交的地址不同

2.文件上传的时机应该在表单校验成功之后

3.表单提交之后清空文件和表单数据

4.对话框格式的书写

<el-dialog title="上传文件" :visible.sync="dialogFormVisible" width="40%">
<el-form :model="form" status-icon :rules="rules" ref="form">
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item label="上报机构:" :label-width="formLabelWidth" prop="organization">
<el-input v-model="form.organization" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row type="flex" justify="center">
<el-col :span="22">
<el-form-item label="上传文件:" :label-width="formLabelWidth">
<el-upload>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="insert('form')">确 定</el-button>
</div>

</el-dialog>

element-ui中上传文件upload的更多相关文章

  1. element ui 上传文件,读取内容乱码解决

    element ui 上传文件,读取内容乱码解决: 加第二个参数 reader.readAsText(file.raw,'gb2312'); <el-upload class="upl ...

  2. Element ui 上传文件组件(单文件上传) 点击提交 没反应

    element ui 第一次上传文件后 上传其他文件再次点击不再次提交 需要使用 clearFiles 清空已上传文件列表 这时候在次点击 上传按钮 就会惊喜的发现 可以上传了使用方法 this.$r ...

  3. element UI 上传文件成功后 - 清空文件

    request({ url: '/jiekou', method: 'post', data }).then(res => { this.$message({ type: 'success', ...

  4. vue+element UI + axios封装文件上传及进度条组件

    1.前言 之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人. 项目用的是Vue框架,UI库使用的是element UI,前 ...

  5. JavaScript中上传文件为图片如何读取+JS中如何使用clip()剪切指定区域(UI组件之图片剪裁器)

    File读取和FileReader() //获取上传的文件/图片 function getFile(){ var files,len; var reader = new FileReader(); v ...

  6. 谈谈php中上传文件的处理

    这是一个表单的时代... 我们在浏览器中编辑自己的信息,会遇到上传头像:在文库中,我们会上传文档......到处存在“上传”这个词. php是最好的语言(其他语言的程序猿们不要打我...).php在处 ...

  7. 现在,以编程方式在 Electron 中上传文件,是非常简单的!

    必要的上下文 想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749 这段讨论,其实本来是讨论如何自动设置 input 标 ...

  8. vue中上传文件之multipart/form-data

    首先在项目里用了拦截器的,由于拦截器会将传递的参数转成对象,所以你i提交的时候会发现multipart/form-data或转变成application/json 其次关于input的文件上传是需要一 ...

  9. HTTPWebrequest上传文件--Upload files with HTTPWebrequest (multipart/form-data)

    使用HTTPWebrequest上传文件遇到问题,可以参考Upload files with HTTPWebrequest (multipart/form-data)来解决 https://stack ...

随机推荐

  1. mybatis LIKE动态参数 sql语句

    @Select({ "select id, vedio_name, vedio_path,vedio_duration, vedio_classify_id, crt_user_id, cr ...

  2. 剑指Offer编程题2——替换空格

    剑指Offer编程题2——替换空格 题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happ ...

  3. 主机服务绑定IP

    在用 netstat -na  查看当前主机提供的服务,例如显示如下结果: tcp        0      0 127.0.0.1:9000              0.0.0.0:*      ...

  4. R leaflet

    setRepositories()#1 chooseCRANmirror()#2 ibrary(leaflet)#学习地址:http://rstudio.github.io/leaflet/marke ...

  5. WPF样式中TargetType 属性 (Property) 和 x:Key 属性 (Attribute)

    如第一个示例所示,如果将 TargetType 属性设置为 TextBlock 而不为样式分配 x:Key,样式就会应用于所有 TextBlock 元素.这种情况下,x:Key 隐式设置为 {x:Ty ...

  6. js的事件冒泡,事件捕获

      addEventListener() 方法可以指定 "useCapture" 参数来设置传递事件类型:false→冒泡       true→捕获       默认false. ...

  7. 第二章:Linux 基础篇章

    一.shell 在系统中,人所输入到系统内部的命令,以字符类型的形式输入刡系统当中,然而系统 只识别2进制码,就如以前 doc 界面为例,输入的都是字符类的英文字母作为输入的命令代 码,然 而明显二进 ...

  8. webstorm主要快捷键

    1.  必备快捷键 Ctrl+/:注释当前行    F11:全屏    Alt+数字:切换打开第N个文件    Ctrl+Shift+P:打开命令面板    Ctrl+P:搜索项目中的文件    Ct ...

  9. PHP源码安装后设置别名

    PHP源码安装后测试是否能正常运行 每次在php目录./bin./php调用php很不方便,可以设置别名(方法一) vi ~/.bash_profile     (修改根目录下这个文件) 设置完成后还 ...

  10. 传输层的端口与TCP标志中的URG和PSH位

    一.协议端口号的提出 运输层提供了进程间通信的能力(即端-端通信).但是不同的操作系统可能无法识别其他机器上的进程.为了用统一的方法对 TCP/IP体系的应用进程进行标志,使运行不同操作系统的计算机的 ...