一.下面讲解一些upload组件中常用的属性及方法
- 属性
limit: 限制文件上传个数,单个文件可设置为1,依据需求设置个数。
accept:限制选择上传文件时的类型(常见类型:jpg/png/xls/xlxs/doc 等)
multiple: 多文件上传时可设置为true
auto-upload: 自动上传,单独上传文件到服务器(不需要和表单一起提交时可设置)
action:上传文件的地址。当我们设置了auto-upload为true时,组件会自动按照action的地址提交。如果不需要单独上传,这个属性可设置为none。
2.方法
on-preview:图片的话可做放大操作【window.open()】,对于文件可以做下载附件的操作,具体方法为window.location.href()。
on-remove: 文件列表移除文件触发
before-upload:上传文件前触发的函数,如果auto-upload关闭 不会自动上传,这个钩子函数也不会触发
on-exceed: 超出文件个数限制的钩子函数,可以在用户选择超过文件个数时,给出有好的提示。
on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用。
3.具体代码
template部分
<el-form-item label="上传附件" class="form-item-100" prop="file">
<el-upload
class="upload-demo"
action="none"
:file-list="fileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-change="handleChange"
:on-preview="downloadFile"
:auto-upload="false"
:limit="1"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
methods部分
// 超出文件限制
handleExceed (files, fileList) {
this.$message.warning(`当前限制上传1个文件,共选择了 ${fileList.length} 个文件`);
},
// 文件列表移除文件时的钩子
handleRemove (file, fileList) {
this.fileList = fileList
},
// 上传文件
handleChange (file, fileList) {
this.fileList = fileList
},
// 下载附件
downloadFile (file) {
window.location.href = file.raw // raw二进制文件
},
二.上传文件与表单共同提交
提交表单方法 使用multipart/form-data;格式传参
let file = ""
file = this.fileList.length ? this.fileList[0].raw : ''
let formData = new FormData()
formData.append('id', this.infoForm.id)
formData.append('fblx', this.infoForm.fblx)
formData.append('fbnr', this.infoForm.fbnr)
formData.append('fb_rqsj', this.infoForm.fb_rqsj)
formData.append('ggdj', this.infoForm.ggdj)
formData.append('fbqxxqdm', this.infoForm.fbqxxqdm)
formData.append('fbqxxqjb', this.infoForm.fbqxxqjb)
formData.append('ggbt', this.infoForm.ggbt)
formData.append('fbqxlb', this.infoForm.fbqxlb)
formData.append('file', file)
formPost('/zhyq/notice/v1/update', formData, {
headers: {
'Content-Type': 'multipart/form-data; charset=utf-8'
},
}).then(res => {
this.$message({
message: "编辑成功!",
type: "success"
});
this.infoShow = false;
this.init();
}).catch(err => {
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。