dom文档
<el-row :gutter="20">
<el-col :span="16" :offset="0">
<el-form-item label-width="120px" label="文件上传">
<el-upload
ref="upload"
class="upload-file-uploader upload-demo"
action=""
:http-request="UploadImage"
:multiple="false"
:file-list="fileList"
:before-upload="handleBeforeUpload"
:on-success="successFileFolder"
:on-error="uploadError"
:show-file-list="true"
:accept="accept"
>
<el-button class="left" size="small" type="primary"
>选择上传文件</el-button
>
<div slot="file" slot-scope="{ file }">
<li class="el-upload-list__item is-success">
<a
@click="() => openUrl(file)"
class="el-upload-list__item-name"
>
<i class="el-icon-document"></i>{{ file.name }}
</a>
<label class="el-upload-list__item-status-label">
<i
class="el-icon-upload-success el-icon-circle-check"
></i>
</label>
<i
@click.stop="handleRemove(file)"
class="el-icon-close"
></i>
</li>
</div>
</el-upload>
</el-form-item>
</el-col>
</el-row>
fileList内容
if (rows) {
for (let i = 0; i < rows.length; i++) {
file.push({
name: rows[i].taskFileName,
id: rows[i].id,
});
}
}
this.fileList = file;
剩下几个对于的函数
UploadImage(param) {
const formData = new FormData();
var data = formData;
if (this.taskNo != "") {
formData.append("taskNo", this.taskNo);
}
formData.append("file", param.file); // 要提交给后台的文件,并且字段的key为Filedata
request({
url: "/task/file/upload",
headers: { "Content-Type": "multipart/form-data" },
data: data,
method: "post",
onUploadProgress: (progressEvent) => {
const complete = parseInt(
((progressEvent.loaded / progressEvent.total) * 100) | 0,
10
);
param.onProgress({ percent: complete });
},
})
.then((res) => {
if (res.code == 200) {
this.$message.success("上传成功");
this.$refs.upload.clearFiles();
this.fileList = [];
this.taskNo = res.data.taskNo;
this.getFileList();
}
return true;
})
.catch((err) => {
this.$refs.upload.clearFiles();
this.fileList = [];
});
},
// 上传前校检格式和大小
handleBeforeUpload(file) {
this.oldFileName = file.name;
// 校检文件类型
if (this.fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
}
const isTypeOk = this.fileType.some((type) => {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if (!isTypeOk) {
this.$message.error(
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
);
return false;
}
}
// 校检文件大小
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if (!isLt) {
this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
return false;
}
}
return true;
},
/** 导出列表 */
downLoad(data, name, type) {
return request({
url: "/task/file/download",
method: "post",
headers: {
"Content-Type": "application/json;charset=UTF-8",
},
responseType: "blob",
// responseType: 'arraybuffer',
data: data,
}).then((res) => {
let typeSet = "application/vnd.ms-excel";
if (type == ".xls") {
typeSet = "application/vnd.ms-excel";
} else if (type == ".xlsx") {
typeSet =
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
} else if (type == ".doc") {
typeSet = "application/msword";
} else if (type == ".docx") {
typeSet =
"application/vnd.openxmlformats-officedocument.wordprocessingml.document";
} else if (type == ".png") {
typeSet = "pplication/pdf";
} else if (type == ".ppt") {
typeSet = "application/vnd.ms-powerpoint";
} else if (type == ".png") {
typeSet = "image/png";
} else if (type == ".pptx") {
typeSet =
"application/vnd.openxmlformats-officedocument.presentationml.presentation";
} else if (type == ".jpeg") {
typeSet = "image/jpeg";
} else if (type == ".zip") {
typeSet = "application/zip";
} else if (type == ".7z") {
typeSet = "application/x-7z-compressed";
} else if (type == "tar") {
typeSet = "application/x-tar";
} else if (type == ".7z") {
typeSet = "application/x-7z-compressed";
}
var url = window.URL.createObjectURL(
new Blob([res], { type: typeSet })
);
const link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
},
successFileFolder(re, file, fileList) {
// fileList = fileList.filter((item) => item.response.code !== 500);
// this.fileList = fileList;
},
uploadError() {
this.$message.error("文件上传失败，请检查文件大小或文件格式");
},
openUrl(file) {
console.log(file);
let params = {
fileId: parseInt(file.id),
};
this.downLoad(params, file.name.split(",")[0], file.name.split(",")[1]);
},
handleRemove(file) {
console.log(file);
let params = {
fileIds: [file.id],
};
delFile(params).then((res) => {
if (res.code == 200) {
this.getFileList();
}
});
},
标签：el,name,upload,typeSet,application,blob,file,else,type From： https://www.cnblogs.com/sweeeper/p/18177151