<template>
<el-upload
ref="upload"
:auto-upload="false"
:http-request="uploadFile"
:on-change="changeFileLength"
multiple>
<i class="el-icon-upload"></i>
<div class="el-upload__text">点击上传文件</div>
</el-upload>
<!-- 上传时点击的按钮 -->
<el-button @click="upload" type="success">上传文件</el-button>
</template>
export default {
name: "uploadCT",
data() {
return {
// 上传文件的列表
uploadFiles: [],
// 上传文件的个数
filesLength: 0,
// 上传需要附带的信息
info: {
id: "",
name: "",
},
}
},
methods: {
// 修改当前文件列表长度
changeFileLength(file, fileList) {
this.filesLength = fileList.length
},
// 用户点击上传调用
async upload() {
// 触发上传 调用配置 :http-request="uploadFile"
// 即触发 uploadFile函数
await this.$refs.upload.submit();
// 上传完成后执行的操作 ...
},
// 该函数还是会被调用多次
// 每次param参数传入一个文件
uploadFile(param) {
// 将文件加入需要上传的文件列表
this.uploadFiles.push(param.file)
// 当uploadFiles长度等于用户需要上传的文件数时进行上传
if (this.uploadFiles.length == this.filesLength) {
// 创建FormData上传
let fd = new FormData()
// 将全部文件添加至FormData中
this.uploadFiles.forEach(file => {
fd.append('file', file)
})
// 将附加信息添加至FormData
fd.append("id", this.info.id)
fd.append("name", this.info.name)
// 配置请求头
const config = {
headers: {
"Content-Type": "multipart/form-data",
}
}
// 上传文件
this.$axios.post("/upload/upload_CT/", fd, config).then(res => {
/*上传成功处理*/
}).catch(err => {/*报错处理*/ });
}
}
}
}