element-ui中上传文件upload

<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>