一、環境準備

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前端與后端服務器之間進行高效的數據交互。通過詳細的接口定義和示例代碼，開發者可以快速地理解并實現前后端的數據通信，為項目的快速迭代和部署提供了有力保障。

最后，在生產環境注意事項部分，我們總結了在實際部署過程中可能遇到的問題及解決方案，如性能優化、安全性考慮等。這些寶貴的經驗分享將幫助開發者更好地將項目從開發環境遷移到生產環境，確保系統的穩定性和可靠性。綜上所述，本文不僅提供了豐富的功能實現，還為開發者提供了全面的開發指導和實戰經驗分享。