zoukankan      html  css  js  c++  java
  • nodeJs实现文件上传,下载,删除

    转:https://blog.csdn.net/qq_36228442/article/details/81709272

    一.简介

         本文介绍了nodeJs+express框架下,用multer中间件实现文件的上传下载以及删除。

    二.上传

         前端使用ElementUI的upload组件实现上传,代码如下:

    <el-upload
    class="upload-demo"
    action="http://localhost:9010/table/uploadFile"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList" ref="elupload">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
    </el-upload>
    action定义后台接口的地址,后台代码如下:

    var multer = require('multer');//引入multer
    var upload = multer({dest: 'uploads/'});//设置上传文件存储地址
    router.post('/uploadFile', upload.single('file'), (req, res, next) => {

    let ret = {};
    ret['code'] = 20000;
    var file = req.file;
    if (file) {
    var fileNameArr = file.originalname.split('.');
    var suffix = fileNameArr[fileNameArr.length - 1];
    //文件重命名
    fs.renameSync('./uploads/' + file.filename, `./uploads/${file.filename}.${suffix}`);
    file['newfilename'] = `${file.filename}.${suffix}`;
    }
    ret['file'] = file;
    res.send(ret);
    })
    定义好上传路径,选择好文件走后台方法时,文件已经下载到后端项目uploads文件夹。文件名是自动生成的uuid。代码需要做的是把文件的后缀加到上传的文件里。

    这里是上传一个文件,所以用upload.single('file'),传入的参数是前台input type=file的name值。

    multer详细API 在这里。

    三.下载

        后端代码:

    router.use('/downloadFile', (req, res, next) => {
    var filename = req.query.filename;
    var oldname = req.query.oldname;
    var file = './uploads/' + filename;
    res.writeHead(200, {
    'Content-Type': 'application/octet-stream',//告诉浏览器这是一个二进制文件
    'Content-Disposition': 'attachment; filename=' + encodeURI(oldname),//告诉浏览器这是一个需要下载的文件
    });//设置响应头
    var readStream = fs.createReadStream(file);//得到文件输入流
    debugger
    readStream.on('data', (chunk) => {
    res.write(chunk, 'binary');//文档内容以二进制的格式写到response的输出流
    });
    readStream.on('end', () => {
    res.end();
    })
    })
       前台传入文件名,后台拼出来文件下载的相对路径。根据路径得到文件输入流,并把内容以二进制格式写到response的输出流。读取结束后响应回浏览器。

    前端代码

    const downloadUrl = url => {
    let iframe = document.createElement('iframe');
    iframe.style.display = 'none'
    iframe.src = url
    iframe.onload = function () {
    document.body.removeChild(iframe)
    }
    document.body.appendChild(iframe)
    };
    module.exports=downloadUrl;
      创建一个工具方法,传入后台接口路径,执行下载。

    dowloadUtil(`${process.env.BASE_API}/table/downloadFile?filename=${filename}&oldname=${oldname}`);
    四.删除

    fs.unlinkSync('./uploads/' + filename);
    调用fs模块的unlinkSync方法,传入文件路径,直接删除。也可以用fs.unlink(callback)这个异步删除。

  • 相关阅读:
    Java并发编程:ThreadLocal
    线程的3种实现方式
    线程的生命周期
    并行与并发
    wordcount详解shuffle机制(转)
    linux vi编译卡死原因
    django2.0集成xadmin0.6报错集锦
    drf框架
    Django中 media资源配置
    Django-rest framework框架的安装配置和简介、Restful接口规范、基于原生django书写满足restful规范的接口
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/11101833.html
Copyright © 2011-2022 走看看