- <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>
来源: http://www.bubuko.com/infodetail-3009275.html