el-upload以及blob自动根据列表名称匹配下载

news/2024/10/6 8:25:50

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();}});},

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/28521.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

振弦采集仪在岩土工程监测中的故障排除和维护要点

振弦采集仪在岩土工程监测中的故障排除和维护要点 河北稳控科技振弦采集仪在岩土工程监测中是一种常用的测量设备,通过测量振弦的振动频率来判断土体的力学性质和变形情况。然而,如果振弦采集仪出现故障,则会影响监测工作的正常进行。因此,掌握振弦采集仪的故障排除和维护要…

Mysql-事务的基本特性和隔离级别

0.背景 在数据库中,事务是一组数据库操作,可以将事务操作视为一个基本的工作单元。 1.事务的基本特性 事务的基本特性“ACID” 对于事务呢,就是这一组sql操作,要确保ACID这4个基本特性。 哎,八股文不好背,我记忆方式是:一元吃个(原持隔)原子性(Atomicity):事务中的…

使用pycnblog一键拖拽同步markdown和图片

目录原因解决办法参考链接准备工作配置config.yaml其他设置图片运行 原因本地使用Typora写完文档,上传博客园时,图片不能同步解决办法 参考链接博客园上传markdown文件准备工作下载工具pycnblog安装Python3pip install pyyaml配置config.yaml blog_url: https://rpc.cnblogs.…

blazor优雅的方式导入组件相关的js脚本

基本的组件导入方式为:1 await JsRuntime.InvokeVoidAsync("import", $"XXXXX.js");优雅的组件导入方式:1 await JsRuntime.ImportAsync<DocEditor>();这种优雅一点不难,只需要写一个扩展方法,把他放在任意地方并且导入命名空间,或者放到和项目…

02 冒泡排序

02 冒泡排序1.冒泡排序的含义每次交换两个,把大的扔在末尾, 每一轮可以确定末尾是最大的,然后是次尾部,依次进行下去。 老师:每次都是搞定最大的数,最大的数往右边冒。再接着搞定下一轮,直到整个数组有序。 图示:2.示例代码 def bubble_sort(arr):# if not arr or len(…

一站式生活新体验:可视化技术让公寓商场综合楼焕新生

可视化技术将传统的居住与购物空间进行了完美融合。在这里,你不再需要为了购买生活用品而特地跑到远处的商场,也不再需要为了找一家心仪的餐厅而四处奔波。通过可视化技术,你可以轻松查看到楼内的各个商铺、餐厅、健身房等配套设施的分布情况,一键导航直达目的地,享受一站…

MySQL-基础语法教程及事务和索引

基础解析: select 要几列 where要几行,用来对行进行过滤,加where,查出来的行变少 *代表所有的列 增删改查UPDATE SET 更新 UPDATE scores SET score=300 WHERE NAME="王大" AND kemu="语文" delete语法 DELETE FROM scores WHERE ID =11#删除整张表里的…

MySQL-基础语法教程

基础解析: select 要几列 where要几行,用来对行进行过滤,加where,查出来的行变少 *代表所有的列 增删改查UPDATE SET 更新 UPDATE scores SET score=300 WHERE NAME="王大" AND kemu="语文" delete语法 DELETE FROM scores WHERE ID =11#删除整张表里的…