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