Vue3实现文件上传、下载及预览全流程详解（含完整接口调用）

在这里插入图片描述
在这里插入图片描述

文章目录

    • 一、环境准备
      • 1.1 创建Vue3项目
      • 1.2 安装依赖
      • 1.3 配置Element Plus
    • 二、文件上传实现
      • 2.1 基础上传组件
      • 2.2 自定义上传逻辑（Axios实现）
    • 三、文件下载实现
      • 3.1 直接下载（已知文件URL）
      • 3.2 后端接口下载（二进制流）
    • 四、文件预览实现
      • 4.1 图片预览
      • 4.2 PDF预览（使用pdf.js）
      • 4.3 Excel预览（使用xlsx）
    • 五、完整接口示例
      • 5.1 上传接口（Node.js示例）
      • 5.2 下载接口（Node.js示例）
    • 六、注意事项
    • 七、完整项目结构
    • 八、总结

一、环境准备

1.1 创建Vue3项目

npm create vue@latest
# 选择TypeScript、Pinia（可选）、ESLint等配置

1.2 安装依赖

npm install axios element-plus @element-plus/icons-vue

1.3 配置Element Plus

// main.ts
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)
app.use(ElementPlus)

二、文件上传实现

2.1 基础上传组件

<template><el-uploadclass="upload-demo":action="uploadUrl":headers="headers":on-success="handleSuccess":before-upload="beforeUpload"><el-button type="primary">点击上传</el-button><template #tip><div class="el-upload__tip">支持扩展名：.jpg/.png/.pdf，最大5MB</div></template></el-upload>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { UploadProps } from 'element-plus'const uploadUrl = ref('https://api.example.com/upload')
const headers = ref({Authorization: 'Bearer ' + localStorage.getItem('token')
})// 文件预校验
const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {const isValidType = ['image/jpeg', 'image/png', 'application/pdf'].includes(rawFile.type)const isLt5M = rawFile.size / 1024 / 1024 < 5if (!isValidType) {ElMessage.error('文件格式不支持!')return false}if (!isLt5M) {ElMessage.error('文件大小不能超过5MB!')return false}return true
}// 上传成功回调
const handleSuccess: UploadProps['onSuccess'] = (response) => {ElMessage.success('上传成功')console.log('服务器返回:', response)// 通常返回文件访问地址
}
</script>

2.2 自定义上传逻辑（Axios实现）

const customUpload = async (file: File) => {const formData = new FormData()formData.append('file', file)formData.append('userId', '123')try {const { data } = await axios.post('/api/upload', formData, {headers: {'Content-Type': 'multipart/form-data',Authorization: `Bearer ${localStorage.getItem('token')}`}})return data} catch (error) {ElMessage.error('上传失败')throw error}
}

三、文件下载实现

3.1 直接下载（已知文件URL）

<template><el-button @click="handleDownload">下载文件</el-button>
</template><script setup lang="ts">
const handleDownload = () => {const link = document.createElement('a')link.href = 'https://api.example.com/files/sample.pdf'link.download = 'filename.pdf' // 设置下载文件名document.body.appendChild(link)link.click()document.body.removeChild(link)
}
</script>

3.2 后端接口下载（二进制流）

const downloadFile = async (fileId: string) => {try {const response = await axios.get(`/api/download/${fileId}`, {responseType: 'blob'})// 创建Blob对象const blob = new Blob([response.data])const url = window.URL.createObjectURL(blob)// 提取文件名const contentDisposition = response.headers['content-disposition']const fileName = contentDisposition?.split('filename=')[1]?.replace(/"/g, '')|| 'download-file'// 创建下载链接const link = document.createElement('a')link.href = urllink.download = fileNamedocument.body.appendChild(link)link.click()window.URL.revokeObjectURL(url)document.body.removeChild(link)} catch (error) {ElMessage.error('下载失败')}
}

四、文件预览实现

4.1 图片预览

<template><el-image :src="imageUrl" :preview-src-list="[imageUrl]"fit="cover"/>
</template>

4.2 PDF预览（使用pdf.js）

npm install pdfjs-dist @types/pdfjs-dist

<template><div ref="pdfContainer" class="pdf-viewer"></div>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as pdfjsLib from 'pdfjs-dist'const props = defineProps<{pdfUrl: string
}>()const pdfContainer = ref<HTMLElement>()onMounted(async () => {const loadingTask = pdfjsLib.getDocument(props.pdfUrl)const pdf = await loadingTask.promisefor (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {const page = await pdf.getPage(pageNum)const viewport = page.getViewport({ scale: 1.5 })const canvas = document.createElement('canvas')const context = canvas.getContext('2d')!canvas.height = viewport.heightcanvas.width = viewport.widthawait page.render({canvasContext: context,viewport: viewport}).promisepdfContainer.value?.appendChild(canvas)}
})
</script>

4.3 Excel预览（使用xlsx）

npm install xlsx

<template><el-table :data="excelData"><el-table-column v-for="(col, index) in columns":key="index":prop="col":label="col"/></el-table>
</template><script setup lang="ts">
import { read, utils } from 'xlsx'
import { ref } from 'vue'const excelData = ref([])
const columns = ref([])const previewExcel = async (file: File) => {const data = await file.arrayBuffer()const workbook = read(data)const worksheet = workbook.Sheets[workbook.SheetNames[0]]const jsonData = utils.sheet_to_json(worksheet, { header: 1 })columns.value = jsonData[0]excelData.value = jsonData.slice(1).map(row => {return columns.value.reduce((obj, col, index) => {obj[col] = row[index]return obj}, {})})
}
</script>

五、完整接口示例

5.1 上传接口（Node.js示例）

// Express 路由
app.post('/api/upload', (req, res) => {const multer = require('multer')const upload = multer({ dest: 'uploads/' })upload.single('file')(req, res, (err) => {if (err) return res.status(500).json({ code: 500, message: '上传失败' })// 返回文件信息res.json({code: 200,data: {url: `/files/${req.file.filename}`,originalname: req.file.originalname,size: req.file.size}})})
})

5.2 下载接口（Node.js示例）

app.get('/api/download/:filename', (req, res) => {const filePath = path.join(__dirname, 'uploads', req.params.filename)res.setHeader('Content-Type', 'application/octet-stream')res.setHeader('Content-Disposition', `attachment; filename=${req.params.filename}`)const fileStream = fs.createReadStream(filePath)fileStream.pipe(res)
})

六、注意事项

  1. 安全验证：所有文件接口需进行身份验证
  2. 文件大小限制：Nginx需配置client_max_body_size
  3. 文件存储：
    • 敏感文件不要存储在公开目录
    • 使用OSS云存储更佳
  4. 预览安全：
    • 防止XSS攻击（特别处理HTML文件）
    • 使用CSP内容安全策略

七、完整项目结构

/src
├─api/
│  └─file.ts       # 文件相关接口封装
├─components/
│  └─FilePreview.vue # 文件预览组件
├─utils/
│  ├─download.ts   # 下载工具函数
│  └─validation.ts # 文件验证函数

八、总结

本文全面而详尽地实现了多项关键功能，为开发者提供了从前端到后端、从组件开发到接口对接的全方位解决方案。首先，我们基于Element Plus这一流行的Vue3组件库，成功构建了一个高效且用户友好的文件上传组件。该组件不仅支持文件的快速上传，还提供了丰富的用户交互体验，如进度条显示、上传成功/失败提示等，极大地提升了用户的使用感受。

在文件处理方面，我们实现了Axios二进制流文件的下载功能。通过Axios的强大网络请求能力，我们能够轻松地从服务器获取二进制文件流，并将其保存到本地或进行进一步的处理。这一功能为文件的异步下载和动态处理提供了有力支持。

为了满足不同格式文件的预览需求，我们精心设计了一套PDF/Excel/图片多格式的预览方案。该方案能够自动识别文件类型，并调用相应的预览组件进行展示。无论是常见的图片文件，还是复杂的PDF、Excel文档，都能在我们的系统中得到清晰、准确的预览效果。

此外，我们还提供了前后端完整接口示例，展示了如何在Vue3前端与后端服务器之间进行高效的数据交互。通过详细的接口定义和示例代码，开发者可以快速地理解并实现前后端的数据通信，为项目的快速迭代和部署提供了有力保障。

最后，在生产环境注意事项部分，我们总结了在实际部署过程中可能遇到的问题及解决方案，如性能优化、安全性考虑等。这些宝贵的经验分享将帮助开发者更好地将项目从开发环境迁移到生产环境，确保系统的稳定性和可靠性。综上所述，本文不仅提供了丰富的功能实现，还为开发者提供了全面的开发指导和实战经验分享。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

分布式数据存储：提升系统弹性与性能的技术之路

分布式数据存储：提升系统弹性与性能的技术之路

分布式数据存储：提升系统弹性与性能的技术之路 在当今数据爆炸式增长的时代，传统的单机存储系统已无法满足大规模、高并发、低延迟的需求。尤其是在大数据、云计算和物联网的推动下，数据存储面临着前所未有的挑战。分布式数据存储应运而生，通过将数据分布在多个物理节点上…
阅读更多...
在编译Linux的内核镜像和模块时,必须先编译内核镜像,再编译模块,顺序不可随意调整的原因

在编译Linux的内核镜像和模块时,必须先编译内核镜像,再编译模块,顺序不可随意调整的原因

问&#xff1a;在编译Linux的内核镜像和模块时,必须先编译内核镜像,再编译模块,顺序不可随意调整 答&#xff1a;在编译 Linux 内核和模块时&#xff0c;必须先编译内核镜像&#xff0c;再编译模块&#xff0c;顺序不可随意调整。 原因&#xff1a; 模块依赖内核的头文件和符…
阅读更多...
免费使用 DeepSeek API 教程及资源汇总

免费使用 DeepSeek API 教程及资源汇总

免费使用 DeepSeek API 教程及资源汇总 一、DeepSeek API 资源汇总1.1 火山引擎1.2 百度千帆1.3 阿里百炼1.4 腾讯云 二、其他平台2.1 华为云2.2 硅基流动 三、总结 DeepSeek-R1 作为 2025 年初发布的推理大模型&#xff0c;凭借其卓越的逻辑推理能力和成本优势&#xff0c;迅速…
阅读更多...
千峰React:案例二

千峰React:案例二

完成对html文档还有css的引入&#xff0c;引入一下数据&#xff1a; import { func } from prop-types import ./购物车样式.css import axios from axios import { useImmer } from use-immer import { useEffect } from reactfunction Item() {return (<li classNameacti…
阅读更多...
用DeepSeek生成批量删除处理 PDF第一页工具

用DeepSeek生成批量删除处理 PDF第一页工具

安装依赖库 在运行程序之前&#xff0c;请确保安装所需的库&#xff1a; pip install pymupdf python-docx Python 程序代码 import os import fitz # PyMuPDF from docx import Documentdef delete_pdf_first_page(input_path, output_path):"""删除 PDF…
阅读更多...
redis的下载和安装详解

redis的下载和安装详解

一、下载redis安装包 进入redis官网查看当前稳定版本&#xff1a; https://redis.io/download/发现此时的稳定版本是6.2.4&#xff0c; 此时可以去这个网站下载6.2.4稳定版本的tar包。 暂时不考虑不在windows上使用redis&#xff0c;那样将无法发挥redis的性能 二、上传tar…
阅读更多...
如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程

如何使用 Jenkins 实现 CI/CD 流水线：从零开始搭建自动化部署流程 在软件开发过程中，持续集成（CI）和持续交付（CD）已经成为现代开发和运维的标准实践。随着代码的迭代越来越频繁，传统的手动部署方式不仅低效，而且容易出错。为了提高开发效率和代码质量，Jenkins作为一款…
阅读更多...
Python基于Django的网络课程在线学习平台【附源码】

Python基于Django的网络课程在线学习平台【附源码】

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…
阅读更多...
Pytorch为什么 nn.CrossEntropyLoss = LogSoftmax + nn.NLLLoss？

Pytorch为什么 nn.CrossEntropyLoss = LogSoftmax + nn.NLLLoss？

为什么 nn.CrossEntropyLoss LogSoftmax nn.NLLLoss&#xff1f; 在使用 PyTorch 时&#xff0c;我们经常听说 nn.CrossEntropyLoss 是 LogSoftmax 和 nn.NLLLoss 的组合。这句话听起来简单&#xff0c;但背后到底是怎么回事&#xff1f;为什么这两个分开的功能加起来就等于…
阅读更多...
rabbitmq 延时队列

rabbitmq 延时队列

要使用 RabbitMQ Delayed Message Plugin 实现延时队列&#xff0c;首先需要确保插件已安装并启用。以下是实现延时队列的步骤和代码示例。 1. 安装 RabbitMQ Delayed Message Plugin 首先&#xff0c;确保你的 RabbitMQ 安装了 rabbitmq-delayed-message-exchange 插件。你可…
阅读更多...
在 Vue 单文件组件（SFC）中，标签的显式关闭与隐式关闭有着重要的区别

在 Vue 单文件组件（SFC）中，标签的显式关闭与隐式关闭有着重要的区别

一、显式关闭标签 1、定义&#xff1a; 所有的 HTML 标签都必须有一个对应的结束标签。 自闭合标签也必须使用 / 来关闭。 <template> <div> <p>这是一个段落</p> <img src"image.png"…
阅读更多...
第四届大数据、区块链与经济管理国际学术会议

第四届大数据、区块链与经济管理国际学术会议

重要信息 官网&#xff1a;www.icbbem.com 时间&#xff1a;2025年3月14-16日 地点&#xff1a;中国-武汉 &#xff08;线上召开&#xff09; 简介 第四届大数据、区块链与经济管理国际学术会议(ICBBEM 2025)&#xff0c;将于2025年3月14-16日在中国湖北省武汉市召开。…
阅读更多...
每日十个计算机专有名词 (7)

每日十个计算机专有名词 (7)

Metasploit 词源&#xff1a;Meta&#xff08;超越&#xff0c;超出&#xff09; exploit&#xff08;漏洞利用&#xff09; Metasploit 是一个安全测试框架&#xff0c;用来帮助安全专家&#xff08;也叫渗透测试人员&#xff09;发现和利用计算机系统中的漏洞。你可以把它想…
阅读更多...
使用Docker Compose部署 MySQL8

使用Docker Compose部署 MySQL8

MySQL 8 是一个功能强大的关系型数据库管理系统，而 Docker 则是一个流行的容器化平台。结合使用它们可以极大地简化 MySQL 8 的部署过程，并且确保开发环境和生产环境的一致性。 安装 Docker 和 Docker Compose 首先，确保你的机器上已经安装了 Docker 和 Docker Compose。 …
阅读更多...
mamba_ssm和causal-conv1d详细安装教程

mamba_ssm和causal-conv1d详细安装教程

1.前言 Mamba是近年来在深度学习领域出现的一种新型结构&#xff0c;特别是在处理长序列数据方面表现优异。在本文中&#xff0c;我将介绍如何在 Linux 系统上安装并配置 mamba_ssm 虚拟环境。由于官方指定mamba_ssm适用于 PyTorch 版本高于 1.12 且 CUDA 版本大于 11.6 的环境…
阅读更多...
c++中初始化列表的使用

c++中初始化列表的使用

在 C 中&#xff0c;初始化列表是在构造函数的定义中&#xff0c;用于对类的成员变量进行初始化的一种方式。它紧跟在构造函数的参数列表之后&#xff0c;使用冒号 : 分隔&#xff0c;各成员变量的初始化用逗号 , 分隔。下面详细介绍初始化列表及其参数的含义。 基本语法 clas…
阅读更多...
《Linux系统编程篇》System V信号量实现生产者与消费者问题（Linux 进程间通信（IPC））——基础篇(拓展思维)

《Linux系统编程篇》System V信号量实现生产者与消费者问题（Linux 进程间通信（IPC））——基础篇(拓展思维)

文章目录 &#x1f4da; **生产者-消费者问题**&#x1f511; **问题分析**&#x1f6e0;️ **详细实现&#xff1a;生产者-消费者****步骤 1&#xff1a;定义信号量和缓冲区****步骤 2&#xff1a;创建信号量****步骤 3&#xff1a;生产者进程****步骤 4&#xff1a;消费者进程…
阅读更多...
利用 Python 爬虫进行跨境电商数据采集

利用 Python 爬虫进行跨境电商数据采集

1 引言2 代理IP的优势3 获取代理IP账号4 爬取实战案例---&#xff08;某电商网站爬取&#xff09;4.1 网站分析4.2 编写代码4.3 优化代码 5 总结 1 引言 在数字化时代&#xff0c;数据作为核心资源蕴含重要价值&#xff0c;网络爬虫成为企业洞察市场趋势、学术研究探索未知领域…
阅读更多...
HONOR荣耀MagicBook 15 2021款 独显(BOD-WXX9,BDR-WFH9HN)原厂Win10系统

HONOR荣耀MagicBook 15 2021款 独显(BOD-WXX9,BDR-WFH9HN)原厂Win10系统

适用型号&#xff1a;【BOD-WXX9】 MagicBook 15 2021款 i7 独显 MX450 16GB512GB (BDR-WFE9HN) MagicBook 15 2021款 i5 独显 MX450 16GB512GB (BDR-WFH9HN) MagicBook 15 2021款 i5 集显 16GB512GB (BDR-WFH9HN) 链接&#xff1a;https://pan.baidu.com/s/1S6L57ADS18fnJZ1…
阅读更多...
c语言实现三子棋小游戏（涉及二维数组、函数、循环、常量、动态取地址等知识点）

c语言实现三子棋小游戏（涉及二维数组、函数、循环、常量、动态取地址等知识点）

使用C语言实现一个三子棋小游戏 涉及知识点&#xff1a;二维数组、自定义函数、自带函数库、循环、常量、动态取地址等等 一些细节点&#xff1a; 1、引入自定义头文件&#xff0c;需要用""双引号包裹文件名&#xff0c;目的是为了和官方头文件的<>区分开。…
阅读更多...
最新文章

Copyright @ 2022~2023