vue文件上传和下载

article/2025/7/11 21:07:53

文件上传

这里使用elementui组件库的文件上传组件

1.手动上传(文件选取后需点击确认上传)

  • action:上传地址
  • auto-upload:是否在选取文件后立即进行上传,默认true手动上传要将其设置为false
  • before-upload :上传文件之前的钩子,参数为上传的文件,上传格式的规定要求可在此钩子函数中写(示例中规定上传格式xlsx或xls)
  • on-success :文件上传成功时的钩子,function(response, file, fileList)
  • ref :注册DOM对象(点击确认上传时获取dom元素并进行一些操作)
<template><div><el-uploadclass="upload-demo"ref="uploadFile"     :action="actionUrl":before-upload="beforeFileUpload":auto-upload="false":on-success='onSuccess':on-error="onError"><el-button size="small" type="primary">选择文件</el-button></el-upload><el-button type="primary" @click="submitUpload">确认上传</el-button></div>
</template>
import { BASE_URL_Manage } from 'config'
export default {  data () {return {      actionUrl: BASE_URL_Manage+'/webManage/upload', // 上传地址  }},methods:{//确认上传submitUpload() {this.$refs.uploadFile.submit();},//文件上传之前beforeFileUpload(file){const File = file.name.replace(/.+\./,"");if (['xlsx','xls'].indexOf(File.toLowerCase())===-1 ) {this.$message.error('只支持上传xlsx、xls文件格式!');this.$refs.uploadFile.clearFiles();return false;}            },//文件上传成功onSuccess(){this.$message.success("文件上传成功");       },//上传失败onError(){this.$refs.upload.clearFiles();this.$message.error("文件上传失败")}}
}

2.立即上传(文件选取后将自动上传)

上传组件去掉 auto-uploadref 即可

<template><div><el-uploadclass="upload-demo"	       :action="actionUrl":before-upload="beforeFileUpload"	     :on-success='onSuccess':on-error="onError"><el-button size="small" type="primary">上传文件</el-button></el-upload></div>
</template>
import { BASE_URL_Manage } from 'config'
export default {  data () {return {      actionUrl: BASE_URL_Manage+'/webManage/upload', // 上传地址  }},methods:{	//文件上传之前beforeFileUpload(file){const File = file.name.replace(/.+\./,"");if (['xlsx','xls'].indexOf(File.toLowerCase())===-1 ) {this.$message.error('只支持上传xlsx、xls文件格式!');this.$refs.uploadFile.clearFiles();return false;}            },//文件上传成功onSuccess(){this.$message.success("文件上传成功");       },//上传失败onError(){this.$refs.upload.clearFiles();this.$message.error("文件上传失败")}}
}

3.上传文件(借助el-upload组件选取文件,自行调上传接口)

  • on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用, function(file, fileList)
  • on-remove:文件列表移除文件时的钩子, function(file, fileList)
  • limit:最大允许上传文件的个数
<template><div><el-uploadclass="upload-demo"ref="uploadFile"     :action="-":auto-upload="false" :limit="1"     :on-change="onChangeFile":on-remove="onRemoveFile"><el-button size="small" type="primary">选择文件</el-button></el-upload><el-button type="primary" @click="submitUpload">上传文件</el-button></div>
</template>
import * as api from "@/api/userPage/index";
export default {  data () {return {      userFile: null, // 上传的文件  }},methods:{//确认上传submitUpload() {if(this.userFile==null){return this.$message.error("请先选取文件!"); }   			 			   		//文件上传添加上传参数(若无需添加参数则直接传this.userFile给接口)const formdata = new FormData();formdata.append("file", this.userFile);formdata.append("user","张三");	//传对象参数,需转成json字符串形式let tick={code:"fdgfhgghg",uid:"4566895623"}formdata.append("ssoTick",JSON.stringify(tick));	//调用上传接口	api.upload(formdata).then(res => {			if (res.code == 200) {				this.$message.success("上传成功");							}else{this.$message.error(res.msg);}});      	},//文件上传改变onChangeFile(file, arr){//限制文件大小							let isLt2M = file.raw.size / 1024 / 1024 < 2;if(!isLt2M){this.$refs.uploadFile.clearFiles();return this.$message.error('上传文件大小不能超过 2MB!');}			this.userFile = file.raw;		},//文件移除onRemoveFile(){			this.userFile=null;},}
}

api/userPage/index.js文件

import { createService } from '@/api/fetch-auth' 
import { BASE_URL_Manage } from 'config'
var fetch = createService('Timstar')
//文件上传
export function upload (data) {return fetch({url: BASE_URL_Manage + '/targetmanager/upload',method: 'post',data,transformRequest(data) {return data;},headers: {"Content-Type": "multipart/form-data"}})
}

文件下载

针对文件下载请求,后端返回给前端是文件流的形式
使用 axios

axios.post(请求路径URL, {参数Params}, {responseType: 'blob'}).then(function(res){//创建a标签let aLink=document.createElement('a');//兼容不同浏览器的url对象const URL=window.URL||window.webkitURL||window.moxURL;aLink.href=URL.createObjectURL(res.data);//将创建的a标签添加到body中document.body.appendChild(aLink);//获取文件名aLink.download= decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('fileName=')[1]);aLink.click();//移除aLink节点document.body.removeChild(aLink);//销毁url对象URL.revokeObjectURL(aLink.href);}
});

需注意的几个地方

  • 设置请求返回类型, responseType: 'blob’
  • 获取文件名 headers[‘content-disposition’].split(’;’)[1].split(‘fileName=’)[1]
  • decodeURIComponent() 解码URI
    可以看看具体后端返回给你的响应头里的内容
    在这里插入图片描述

http://chatgpt.dhexx.cn/article/DUCOAiCL.shtml

相关文章

windows修改文件后缀名(文件扩展名)

1.直接修改 打开我的电脑->查看->文件拓展名 勾上即可 before \qquad\qquad\qquad\qquad\qquad after \qquad\qquad 2.任何文本编辑器->另存为->保存类型选所有文件

Windows11修改文件后缀名的方法

Windows11修改文件后缀名的方法 最近买了一台新电脑&#xff1a;suface pro8 新电脑是真的香啊&#xff0c;但是目前发现一个问题&#xff0c;就是windows11的环境对文件后缀名的可修改性不太友好。 他的自定义是对文件后缀名也看不见的&#xff0c;通过一些设置可以查看到文件…

window10 系统下如何修改文件后缀

文章目录 需求&#xff1a;修改后缀&#xff08;方法一&#xff09;&#xff1a;1、打开-- 文件扩展名&#xff1a;2、重名了文件&#xff1a; 修改后缀&#xff08;方法二&#xff0c;新增&#xff09;1、代码修改过程&#xff08;很简单&#xff0c;拖入&#xff0c;写入文件…

matlab 实现批量修改文件后缀名 案例

实现目标描述&#xff1a;选择我有一个大文件&#xff0c;里面有许多子文件夹&#xff0c;子文件夹内都是csv格式的文件&#xff0c;我现在将这个大文件内所有子文件夹的.csv文件的后缀名改为.sps文件 %author foddcus FAFU %用法&#xff1a;批量修改文件后缀名 clear all src…

如何修改文件后缀

文章目录 1.搜索“文件资源管理器选项”2.打开我的电脑选项 1.搜索“文件资源管理器选项” 点击查看、取消选择“隐藏拓展名”2.打开我的电脑选项 wine打开文件夹资源管理器&#xff0c;点击查看&#xff0c;点击“文件拓展名”

WIN10 如何修改 文件后缀名 设置后缀名可修改

管理员权限下&#xff1a;打开任意一个文件夹---查看---选中文件扩展名&#xff1a;这时 文件的后缀名就显示出来了&#xff0c;单击文件 就可以修改后缀名了

python文件操作3--批量修改文件后缀名

1、引言 需要把.dat 格式 转化成 .txt格式 2、实现 # python批量更换后缀名 import os# 列出当前目录下所有的文件 files os.listdir(.) for filename in files:portion os.path.splitext(filename)# 如果后缀是.datif portion[1] ".dat": # 重新组合文件名和…

怎么修改html后缀名,在win7系统下如何修改文件后缀名?win7修改文件后缀名html方法...

在win7系统默认情况下&#xff0c;直接在文件后面加上“.扩展名”&#xff0c;相当于给文件命名&#xff0c;而不是直接修改文件类型的。那么在win7系统下如何修改文件后缀名?下面小编就为大家介绍win7修改文件后缀名html方法&#xff0c;一起来看看吧&#xff01; 方法/步骤 …

linux 批量修改文件后缀名

今天遇到的一个问题&#xff0c;要将一批jpg文件后缀名更改为png&#xff0c;凭感觉能用awk指令进行修改&#xff0c;就进行了尝试。 想到的思路是&#xff1a;先列举出文件名称&#xff0c;再用awk对文件名称进行处理分割&#xff0c;最后将后缀名进行修改。 首先列举出文件…

批量修改后缀名的方法,批量修改文件后缀名

批量修改后缀名的方法&#xff0c;批量修改文件后缀名&#xff01;文件的后缀名就是文件的拓展名&#xff0c;有些小伙伴在工作中经常需要修改文件后缀名&#xff0c;这是一个并不困难的电脑操作&#xff0c;我们只需要选中文件然后鼠标右击它&#xff0c;点击重命名&#xff0…

Windows系统批量修改文件后缀名/扩展名

查看文件 查看文件是否有扩展名&#xff0c;没有后缀名通过ctrlE打开计算机&#xff0c;找到“工具”—>“文件夹选项”—>“查看”&#xff0c;取消勾选“隐藏已知文件类型的扩展名”&#xff0c;然后就可以看到文件的扩展名。如果打开扩展名后还是没有显示扩展名&#…

windows下如果批量修改文件的后缀名

背景 电脑上有几十个mp4格式的视频学习资料&#xff0c;这些资料都学完了&#xff0c;打算把它安全的封存起来&#xff0c;最有效的封存方法是把名字修改了&#xff0c;而且后缀名mp4删掉或者改成一个不常见的后缀名。 刚开始我是一个一个的重命名&#xff0c;这样发现太麻烦了…

怎么批量修改文件后缀名?

怎么批量修改文件后缀名&#xff1f;什么是文件的后缀名&#xff0c;相信大家都应该知道吧&#xff0c;例如一张图片的名称是“1.jpg”&#xff0c;那么“.jpg”就是文件的后缀名。工作中有时候我们需要对文件后缀名进行修改&#xff08;这里不是格式转换&#xff09;&#xff…

Python 实用技巧 —— 批量修改文件后缀(类型)

批量修改文件后缀&#xff08;属性&#xff09; 1.1 读取目录并切分1.2 获取文件前后缀名1.3 文件重命名思路1.4 os.rename 实现重命名1.5 批量修改文件属性 思路&#xff1a; 读取目录下文件的类型(os.listdir("…"))分割文件名与文件类型&#xff0c;以 ‘点’ 为…

windows10批量修改文件后缀名

windows10批量修改文件后缀名 步骤 1. 在windows开始栏中打开命令提示符&#xff0c; 也可以用快捷键:winR ,输入cmd&#xff0c;回车 2. cd到你需要修改后缀名的文件夹目录下&#xff0c;输入命令:ren *.bat *.png 命令行的意思是 把所有bat文件修改成png文件

如何批量修改文件后缀名?

如何批量修改文件后缀名&#xff1f;文件的后缀名告诉了我们这个文件是什么文件&#xff0c;例如后缀名为docx的文件是word&#xff0c;后缀名为xlsx的文件是excel表格。在文件的使用过程中&#xff0c;我们也经常需要对文件的后缀名进行修改。电脑上修改文件后缀名的操作也比较…

bat之统一修改文件名后缀

调整文件后缀 注意&#xff1a;以下所有代码块都需要ANSI编码&#xff0c;新建txt输入相关代码&#xff0c;最后将txt改为bat&#xff0c;运行。 1、统一修改格式类型 &#xff08;1&#xff09;例子A&#xff1a;将后缀png改为gif 例子A实现方法&#xff1a; ren *.png *.g…

Python 批量修改文件后缀

文章目录 一、需求来源。二、解题思路总结 一、需求来源。 这个是我在学习视频的时候遇见的一个问题&#xff1a;该视频所用的笔记软件是为知笔记&#xff0c;它的笔记文件格式是.ziw&#xff0c;在这个过程中&#xff0c;我用为知笔记也不好打开&#xff0c;经过百度&#xf…

Win11文件类型怎么改?Win11修改文件后缀的方法

Win11文件类型怎么改&#xff1f;有时候我们想要打开电脑文件时&#xff0c;却发现文件打不开的情况&#xff0c;出现这一情况有可能是文件损坏&#xff0c;又或者是当前文件的格式不符合打开要求&#xff0c;对此我们可以试着修改文件的格式类型&#xff0c;那么应该如何操作呢…

计算机如何更改后缀文件名,如何批量修改文件后缀名(任何文件的扩展名)?

无需软件批量修改文件后缀名?怎么通过命令行批量修改文件后缀名?有时候由于文件后缀名格式不同,有的时候我们需要对文件扩展名进行修改,或者文件扩展名丢失,需要添加。如果数量少的文件那还简单直接修改就好了。如果很多怎么办呢?下面小编告诉您一个不需要安装软件也能操…