<el-upload
class="upload-demo"vue
name="targetFile"element-ui
ref="upload"cookie
: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
首先搞清楚文件上传通常的请求方式都是post请求flex
请求携带的参数是经过name属性来指定键名的:例如 name="targetFile"ui
ref绑定的是当前文件上传表单,未来能够经过this.$refs.upload.submit()请求上传文件的URLthis
:with-credentials="true"表明支持发送 cookie 凭证信息spa
:limit表明最大支持的文件上传个数orm
:file-list 是本身上传的文件列表,里面包含了本身上传的文件token
: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>