dom文档
<el-row :gutter="20"><el-col :span="16" :offset="0"><el-form-item label-width="120px" label="文件上传"><el-uploadref="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"><iclass="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();}});},