一. 上面解说一些 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 => {});