vue实现文档分享
Vue 实现文档分享功能
使用 Vue 和第三方库实现文档上传与分享
在 Vue 中实现文档分享功能，通常需要结合文件上传、存储和分享链接生成等步骤。以下是一个常见的实现方案：
安装必要的依赖库：
npm install axios vue-dropzone vue-qrcode创建文件上传组件：
<template>
<div>
<vue-dropzone ref="dropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
<button @click="generateShareLink">生成分享链接</button>
<div v-if="shareLink">
<p>分享链接：{{ shareLink }}</p>
<vue-qrcode :value="shareLink" :width="200"></vue-qrcode>
</div>
</div>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import VueQrcode from 'vue-qrcode'
export default {
components: {
vueDropzone: vue2Dropzone,
VueQrcode
},
data() {
return {
dropzoneOptions: {
url: 'https://your-api-endpoint.com/upload',
thumbnailWidth: 150,
maxFilesize: 50, // MB
acceptedFiles: '.pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx',
addRemoveLinks: true,
autoProcessQueue: false
},
shareLink: null
}
},
methods: {
async generateShareLink() {
const files = this.$refs.dropzone.getAcceptedFiles()
if (files.length === 0) return
const formData = new FormData()
formData.append('file', files[0])
try {
const response = await axios.post('/api/generate-share-link', formData)
this.shareLink = response.data.link
} catch (error) {
console.error('Error generating share link:', error)
}
}
}
}
</script>后端 API 实现
后端需要提供两个主要接口：
- 文件上传接口
- 生成分享链接接口
Node.js Express 示例：
const express = require('express')
const multer = require('multer')
const { v4: uuidv4 } = require('uuid')
const path = require('path')
const app = express()
const upload = multer({ dest: 'uploads/' })
// 存储文档信息
const documents = {}
app.post('/api/upload', upload.single('file'), (req, res) => {
res.json({ success: true })
})
app.post('/api/generate-share-link', upload.single('file'), (req, res) => {
const fileId = uuidv4()
const fileInfo = {
name: req.file.originalname,
path: req.file.path,
createdAt: new Date()
}
documents[fileId] = fileInfo
const shareLink = `https://your-domain.com/share/${fileId}`
res.json({ link: shareLink })
})
app.get('/share/:id', (req, res) => {
const fileInfo = documents[req.params.id]
if (!fileInfo) return res.status(404).send('File not found')
res.download(fileInfo.path, fileInfo.name)
})
app.listen(3000, () => console.log('Server running on port 3000'))安全与权限控制
为文档分享添加权限控制：
// 在生成链接时添加密码
const fileId = uuidv4()
const password = Math.random().toString(36).substring(2, 8)
documents[fileId] = {
...fileInfo,
password
}
// 前端添加密码验证
methods: {
async downloadFile() {
if (!this.password) return alert('请输入密码')
try {
const response = await axios.post(`/api/verify-password/${this.fileId}`, {
password: this.password
})
if (response.data.valid) {
window.open(this.shareLink)
} else {
alert('密码错误')
}
} catch (error) {
console.error('Error verifying password:', error)
}
}
}云存储集成
可以使用云存储服务如 AWS S3 或阿里云 OSS 替代本地存储：
AWS S3 配置示例：
const AWS = require('aws-sdk')
const s3 = new AWS.S3({
accessKeyId: process.env.AWS_ACCESS_KEY,
secretAccessKey: process.env.AWS_SECRET_KEY,
region: process.env.AWS_REGION
})
app.post('/api/upload-to-s3', upload.single('file'), async (req, res) => {
const fileContent = fs.readFileSync(req.file.path)
const params = {
Bucket: 'your-bucket-name',
Key: `documents/${req.file.originalname}`,
Body: fileContent
}
try {
const data = await s3.upload(params).promise()
res.json({ location: data.Location })
} catch (err) {
res.status(500).json({ error: err.message })
}
})过期时间设置
为分享链接添加过期时间：
// 生成链接时
documents[fileId] = {
...fileInfo,
expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7天后过期
}
// 验证链接时
app.get('/share/:id', (req, res) => {
const fileInfo = documents[req.params.id]
if (!fileInfo) return res.status(404).send('File not found')
if (new Date() > new Date(fileInfo.expiresAt)) {
return res.status(410).send('Link expired')
}
res.download(fileInfo.path, fileInfo.name)
})以上方案提供了从前端到后端的完整实现思路，可根据实际需求进行调整和扩展。
