node+koa2实现文件的上传、下载、删除

2 篇文章 0 订阅

先引用必须引用的库,自行查看package.json有无下载 没有就 npm install 下载

const multer = require("@koa/multer");
const path = require("path");
const fs = require("fs");
const send = require("koa-send")

在app.js里引用  koa-static 这个是设置静态目录的,不设置这个文件是访问不了的

const static = require("koa-static");
const publicDir = path.join(__dirname, "/public")
// 设置静态文件目录
app.use(static(publicDir));

 设置请求体

const bodyParser = require("koa-bodyparser");

// 使用body-parser中间件处理请求体
app.use(
  bodyParser({
    multipart: true,
  })
);

1、文件上传

// 文件上传
const storage = multer.diskStorage({
    // 文件保存路径
    destination: function (req, file, cb) {
        cb(null, path.resolve(__dirname, "../public/overUploads"));//这里设置你需要保存的位置
    },
    // 修改文件名称
    filename: function (req, file, cb) {
        let fileFormat = file.originalname.split("."); //以点分割成数组,数组的最后一项就是后缀名
        cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
});

const upload = multer({storage});


route.post("/upload", upload.single("file"), async (ctx) => {
    const {filename} = ctx.request.file; //获取前端传递过来的文件信息
    let filenames = '/overUploads/' + filename
    // 获取token中的username
    let username = ctx.state.user.username
    const data = await article.addFile(username, filenames);
    ctx.body = data;
});

 2、文件下载 这里需要前端配合

route.post('/download/:name', async (ctx)=>{
    const name = ctx.params.name;
    const filePath = `public/overUploads/${name}`
    ctx.attachment(filePath);
    await send(ctx, filePath);
});

前端我用的axios 

axios({
  method: 'get',
  url: `/download/${row.lastname}`,
  responseType: 'blob', // 指定响应类型为二进制流
})
  .then(response => {
    // 处理成功的响应
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const a = document.createElement('a');
    a.href = url;
    a.download = row.lastname; // 设置下载时的文件名
    document.body.appendChild(a);
    a.click(); // 模拟点击事件触发下载
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url); // 释放创建的 URL 对象
  })
  .catch(error => console.error('Error downloading file:', error));

这段前端代码的主要作用是使用 axios 向服务器端发起 GET 请求,指定响应类型为二进制流 (responseType: 'blob')。然后,通过 Blob 和 URL.createObjectURL 将响应数据转换成一个可下载的 URL。接着,创建一个 <a> 元素,设置其 href 为刚刚创建的 URL,设置 download 属性为文件名,模拟点击该链接来触发文件下载。最后,释放先前创建的 URL 对象

当然使用fetch也是一样的

// 使用 fetch 进行文件下载
fetch(`/download/${row.lastname}`)
  .then(response => response.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(new Blob([blob]));
    const a = document.createElement('a');
    a.href = url;
    a.download = row.lastname; // 文件名
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  })
  .catch(error => console.error('Error downloading file:', error));

3、文件删除

network.get("/delete", async (ctx) => {
    const filenames = ctx.request.query.filenames;

    var files = [];
    const filePath = path.join('public/', filenames); // 根据文件ID构建文件路径
    console.log(filePath)
    try {
        if (fs.existsSync(filePath)) { // 检查文件是否存在
            fs.unlinkSync(filePath); // 如果存在则删除文件
            ctx.body = { code: 200, msg: '文件删除成功' }; // 返回成功响应
        } else {
            ctx.body = { code: 404, msg: '文件不存在' }; // 返回错误响应,文件不存在
        }
    } catch (err) {
        console.error(err); // 打印错误信息
        ctx.body = { code: 500, msg: '服务器错误' }; // 返回错误响应,服务器错误
    }

});

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值