一、環(huán)境準(zhǔn)備

1.1 創(chuàng)建Vue3項(xiàng)目

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)

---

二、文件上傳實(shí)現(xiàn)

2.1 基礎(chǔ)上傳組件

<template><el-uploadclass="upload-demo":action="uploadUrl":headers="headers":on-success="handleSuccess":before-upload="beforeUpload"><el-button type="primary">點(diǎn)擊上傳</el-button><template #tip><div class="el-upload__tip">支持?jǐn)U展名：.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')
})// 文件預(yù)校驗(yàn)
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
}// 上傳成功回調(diào)
const handleSuccess: UploadProps['onSuccess'] = (response) => {ElMessage.success('上傳成功')console.log('服務(wù)器返回:', response)// 通常返回文件訪問地址
}
</script>

2.2 自定義上傳邏輯（Axios實(shí)現(xiàn)）

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}
}

---

三、文件下載實(shí)現(xiàn)

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' // 設(shè)置下載文件名document.body.appendChild(link)link.click()document.body.removeChild(link)
}
</script>

3.2 后端接口下載（二進(jìn)制流）

const downloadFile = async (fileId: string) => {try {const response = await axios.get(`/api/download/${fileId}`, {responseType: 'blob'})// 創(chuàng)建Blob對(duì)象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'// 創(chuàng)建下載鏈接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('下載失敗')}
}

---

四、文件預(yù)覽實(shí)現(xiàn)

4.1 圖片預(yù)覽

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

4.2 PDF預(yù)覽（使用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預(yù)覽（使用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)
})

---

六、注意事項(xiàng)

1. 安全驗(yàn)證：所有文件接口需進(jìn)行身份驗(yàn)證
2. 文件大小限制：Nginx需配置client_max_body_size
3. 文件存儲(chǔ)：
   • 敏感文件不要存儲(chǔ)在公開目錄
   • 使用OSS云存儲(chǔ)更佳
4. 預(yù)覽安全：
   • 防止XSS攻擊（特別處理HTML文件）
   • 使用CSP內(nèi)容安全策略

---

七、完整項(xiàng)目結(jié)構(gòu)

/src
├─api/
│  └─file.ts       # 文件相關(guān)接口封裝
├─components/
│  └─FilePreview.vue # 文件預(yù)覽組件
├─utils/
│  ├─download.ts   # 下載工具函數(shù)
│  └─validation.ts # 文件驗(yàn)證函數(shù)

---

八、總結(jié)

本文全面而詳盡地實(shí)現(xiàn)了多項(xiàng)關(guān)鍵功能，為開發(fā)者提供了從前端到后端、從組件開發(fā)到接口對(duì)接的全方位解決方案。首先，我們基于Element Plus這一流行的Vue3組件庫(kù)，成功構(gòu)建了一個(gè)高效且用戶友好的文件上傳組件。該組件不僅支持文件的快速上傳，還提供了豐富的用戶交互體驗(yàn)，如進(jìn)度條顯示、上傳成功/失敗提示等，極大地提升了用戶的使用感受。

在文件處理方面，我們實(shí)現(xiàn)了Axios二進(jìn)制流文件的下載功能。通過Axios的強(qiáng)大網(wǎng)絡(luò)請(qǐng)求能力，我們能夠輕松地從服務(wù)器獲取二進(jìn)制文件流，并將其保存到本地或進(jìn)行進(jìn)一步的處理。這一功能為文件的異步下載和動(dòng)態(tài)處理提供了有力支持。

為了滿足不同格式文件的預(yù)覽需求，我們精心設(shè)計(jì)了一套PDF/Excel/圖片多格式的預(yù)覽方案。該方案能夠自動(dòng)識(shí)別文件類型，并調(diào)用相應(yīng)的預(yù)覽組件進(jìn)行展示。無(wú)論是常見的圖片文件，還是復(fù)雜的PDF、Excel文檔，都能在我們的系統(tǒng)中得到清晰、準(zhǔn)確的預(yù)覽效果。

此外，我們還提供了前后端完整接口示例，展示了如何在Vue3前端與后端服務(wù)器之間進(jìn)行高效的數(shù)據(jù)交互。通過詳細(xì)的接口定義和示例代碼，開發(fā)者可以快速地理解并實(shí)現(xiàn)前后端的數(shù)據(jù)通信，為項(xiàng)目的快速迭代和部署提供了有力保障。

最后，在生產(chǎn)環(huán)境注意事項(xiàng)部分，我們總結(jié)了在實(shí)際部署過程中可能遇到的問題及解決方案，如性能優(yōu)化、安全性考慮等。這些寶貴的經(jīng)驗(yàn)分享將幫助開發(fā)者更好地將項(xiàng)目從開發(fā)環(huán)境遷移到生產(chǎn)環(huán)境，確保系統(tǒng)的穩(wěn)定性和可靠性。綜上所述，本文不僅提供了豐富的功能實(shí)現(xiàn)，還為開發(fā)者提供了全面的開發(fā)指導(dǎo)和實(shí)戰(zhàn)經(jīng)驗(yàn)分享。