毕设的共享图书系统需要所运用到的,有关文件的上传、下载功能的实现,现在就总结一下记录在博客上:

上传功能

前端

上传所使用的element的upload组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<el-upload class="upload-demo" ref="upload" action=""
:with-credentials="true"
:on-error="handleError"
:limit="1"
:before-upload="beforeAvatarUpload"
:file-list="fileList"
:http-request="commintEditor"
:on-exceed="uploadExceed"
:on-change="uploadChange"
:on-remove="uploadRemove"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
<div slot="tip" class="el-upload__tip">只能上传jpg、pdf、doc文件,且不超过5MB</div>
</el-upload>

其中对一些钩子方法进行了定义,用于检验上传的设定大小,格式等…例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
beforeAvatarUpload (file) {
var fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
console.log(fileType)
const isJPG = fileType === 'jpg'
const iswordx = fileType === 'docx'
const isword = fileType === 'doc'
const ispdf = fileType === 'pdf'
const ispng = fileType === 'png'
const isLt5M = file.size / 1024 / 1024 < 5
if (!isJPG && !isword && !ispdf && !iswordx && !ispng) {
this.$message.error('上传只能是 jpg、png、doc、pdf 格式!')
}
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!')
}
return (isJPG || isword || ispdf || iswordx || ispng) && isLt5M
}

// 以上是对于文件格式,大小的检验

在上传的函数中使用formdata的形式传输

1
formData.append('file', _file)

并且独立配置相应Axios的headers

1
2
3
4
5
var config = {
headers: {
'Content-Type': 'multipart/form-data'
}
}

后台

后台接收部分使用的是formidable模块,并为其设定服务器中的默认存储目录

1
2
3
4
5
// 接收文件
var formidable = require('formidable')
var form = new formidable.IncomingForm()

form.uploadDir = './uploadFile'

对文件的解析部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 此模块解析请求信息,将json数据与文件数据分开为field、files两部分
form.parse(req, function (err, field, files) {
// fields存放json数据,files存放的是文件信息
files.field = field
var $params = files.field

// 我们可以识别若files存在,则进行存储写入的操作再后续进行数据库记录操作
// 1
// 如果有文件的情况下
if (files.file) {
// oldpath为解析请求中文件时存放的目录地址,我们目前需要将其重命名然后放入我们所需要的最终地址
let oldpath = path.join(files.file.path)
// 获取files相关属性
var JsonFile = files.file
var fileName = JsonFile.name
// 新的目录,为了防止同名,再加上随机数
var ranFileName = String(parseInt(Math.random() * 8999 + 10000)).concat(fileName)
// 新生成包含随机数的文件名与目录拼接的地址
newpath = path.join('./uploadFile', ranFileName)
// 利用fs模块进行文件重命名并且移动
fs.rename(oldpath, newpath, function (err) {
if (err) {
result = {
code: '1',
data: {
},
msg: '新文章上传错误'
}
jsonWrite(res, result)
console.log(`上传文件重命名错误${err}`)
} else {
// 进行数据库记录,newpath为移动后的目录记录
commitToSql(req, res, $params, newpath)
}
})
}
// 无文件的情况下,进行数据库记录
else {
// 进行数据库记录,newpath为移动后的目录记录
commitToSql(req, res, $params, newpath)
}

})

于此,便完成了文件的上传记录(其余省略代码)


下载功能

前端

1
2
3
4
5
6
7
//  利用window.open打开一个新的页面,并且发送相应的请求连接与参数
// 缺点:页面闪现
lookArticle (index, row) {
var bookusername = row.username
var booktitle = row.title
window.open(`/lookArticle?bookusername=${bookusername}&booktitle=${booktitle}`)
},

后台

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//  分析相应文件名称
var fileName = $params.fileName
// 拼接后台服务器中文件的路径,以便使用
var currFile = path.join(__dirname, '../uploadFile/' + fileName)
// 使用fs.exists判断文件是否存在,目前已经不推荐使用fs.exists
fs.exists(currFile, function (exists) {
if (exists) {
console.log('文件存在')
res.download(currFile)
} else {
result = {
code: '1',
data: {
},
msg: '文件不存在'
}
jsonWrite.jsonWrite(res, result)
}
})

于此完成文件的下载功能
演示代码略为简单