vue(axios) + node.js(express) 上传文件

vue(axios) + node.js(express) 上传文件

vue

<template>
<input type="file" class="preFile" name="staffFile" multiple="multiple" @change="changeFn($event)"/>
</template>

<script>
export default {
    methods:{
        changeFn(e) {
            //新建 formData 对象
            let formData = new FormData()
            //添加文件信息
            formData.append("file", e.target.files[0])
            let config = {
                //必须
                headers: {
                    "Content-Type": "multipart/form-data"
                },
                //获取上传进度, 可去掉
                onUploadProgress: function(progressEvent) {
                    let complete =
                        ((progressEvent.loaded / progressEvent.total) * 100) | 0
                    console.log(complete + "%")
                },
            }
            this.axios.post("服务端地址/upload", formData, config).then(result => {
                console.log(result.data)
            });
        } 
    }
}
</script>

node.js

//引入multer
const multer = require('multer')
//设置上传文件存储地址
const upload = multer({ dest: 'uploads/' })

router.post('/upload', upload.single('file'), (req, res, next) => {
    //返回客户端的信息
    let data = {}
    data['code'] = 200
    //获取文件
    let file = req.file
    if (file) {
        //获取文件名
        let fileNameArr = file.originalname.split('.')
        //获取文件后缀名
        var suffix = fileNameArr[fileNameArr.length - 1]
        //文件重命名
        fs.renameSync('./uploads/' + file.filename, `新路径+新文件名.${suffix}`)
        file['newfilename'] = `新文件名.${suffix}`
    }
    data['file'] = file
    res.send(data)
})

下载文件

html

<a href="服务器地址/download?filename=文件名" download="新文件名">下载</a>

js

let url = `服务器地址/download?filename=文件名&oldname=新文件名`
function downlaod(url){
    let iframe = document.createElement('iframe');
    iframe.style.display = 'none'
    iframe.src = url
    iframe.onload = function () {
        document.body.removeChild(iframe)
    }
    document.body.appendChild(iframe)
}

node.js

router.use('/download', (req, res, next) => {
    let filename = req.query.filename
    let newname = req.query.newname || req.query.filename
    let file = '文件地址' + filename
    //设置响应头
    res.writeHead(200, {
        //告诉浏览器这是一个二进制文件
        'Content-Type': 'application/octet-stream',
        //告诉浏览器这是一个需要下载的文件
        'Content-Disposition': 'attachment; filename=' + encodeURI(newname),
    })
    //文件输入流
    let readStream = fs.createReadStream(file)
    //以二进制的格式写入 res
    readStream.on('data', (chunk) => {
        res.write(chunk, 'binary')
    });
    readStream.on('end', () => {
        res.end()
    })
})