专栏首页前端人人前端自己动手使用nodejs上传打包文件到aliyun oss

前端自己动手使用nodejs上传打包文件到aliyun oss

我们现在做的这个项目,前端文件选择放到aliyun oss上,oss 提供了各种语言的SDK。我们前端本着不麻烦后端,能自己动手,就自己动手的原则,使用nodejs来上传打包后的文件到aliyun oss。

官方提供的示列:

通过put接口将本地文件上传到 OSS:

let OSS = require('ali-oss')

let client = new OSS({
  region: '<Your region>',
  accessKeyId: '<Your AccessKeyId>',
  accessKeySecret: '<Your AccessKeySecret>',
  bucket: '<Your bucket name>',
});

async function put () {
  try {
    let result = await client.put('object-name', 'local-file');
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}

put();

我们先来使用下官方提供的示列:

首先安装这个包

npm i -D ali-oss

然后在根目录下新建 ali-oss.js 文件,并复制上面的代码到该文件中,并填写上各种配置信息,如图所示:

这里是关键我也是试了几次才知道:

let result = await client.put('object-name', 'local-file');

object-name:你必须制定oss 文件管理的 文件名称,子目录下的要指定目录及文件名称及后缀。

local-file:就是本地文件路径。

比如改成这样:

let result = await client.put('index.html', 'dist/index.html');

然后在终端里执行:

node ali-oss.js

然后查看aliyun oss 文件管理

该文件就上传成功了。

你可能需要自己写个文件遍历,才能把你dist下所有文件擅上传上去,默认是覆盖oss里的文件。如果你想每次上传,都清空oss 文件管理,你可能还需要写一个遍历oss文件,并删除的逻辑代码。

推荐:

如果不想自己写的话,这里推荐另一个包(ali-oss-publish,详细使用说明请移步至github),也是基于ali-oss开发的。

我们安装这个包:

npm i -D ali-oss-publish

我们在根目录下新建 ali-oss-publish.js

代码如下:

const publish = require("ali-oss-publish");

publish(
  {
    id: "xxxxx",
    secret: "xxxxx",
    region: "xxxxx",
    bucket: "xxxxx",
    entry: "dist", // defaults to '.'
    // include: /bin|cli|lib|*.js$|\.md$/,
    exclude: /.DS_Store$/,
    mime: filename => {
      if (/\.md$/.test(filename)) {
        return "text/markdown";
      }

      return undefined;
    },
    meta: {
      ref: Date.now()
    },
    headers: {
      "Cache-Control": "max-age=30672000"
    },
    rules: [
      {
        test: /(index\.html|service-worker\.js)$/,
        use: {
          headers: {
            "Cache-Control": "no-cache"
          }
        }
      }
    ],
    output: ".",
    config: "", // defaults to try load config from 'ali-oss-publish.config.js' when config is not set
    retry: 1,
    concurrency: 4,
    force: true
  },
  (err, stats) => {
    if (err) {
      console.error("ali-oss-publish encountered a fatal error.");
      console.error(err);

      process.exit(1);
    }

    if (stats.hasProgress()) {
      const { type, index, current, total, message } = stats;

      console.log("[%s] [%s/%s] #%s: %s", type, current, total, index, message);
    } else {
      console.log(stats.message);
    }

    if (stats.hasWarnings()) {
      console.warn("ali-oss-publish encountered some warnings.");
      stats.warnings.forEach(x => {
        console.warn(x);
      });
    }

    if (stats.hasErrors()) {
      console.error("ali-oss-publish encountered some errors.");
      stats.errors.forEach(x => {
        console.error(x);
      });
    }
  }
);

这里主要3个地方:

  1. entry:"dist" // 你本地要上传的目录
  2. include: // 可以注释掉,主要用来正则匹配要上传哪些文件
  3. output:"."// oss 目录, 点号带包 跟目录

我们在终端执行:

node ali-oss-publish.js

这样dist目录下文件就逗上传到oss 跟目录下了

本文完!

本文分享自微信公众号 - 前端人人(frontend_everyone),作者:思铭

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React多页面应用4(webpack4 提取第三方包及公共组件)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • React第三方组件5(状态管理之Redux的使用①简单使用)

    本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

    前端人人
  • React多页面应用3(webpack4 多页面实现)

    本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React多页面应用1(webpack4 开发环境搭建...

    前端人人
  • 【iOS开发】如何将 Array 存储在本地

    做开发的时候,我们经常需要将数据保存在plist文件中,用这种方式来将数据写入磁盘,这样退出 App 再打开的话,上次写入的文件还在。

    KyXu
  • 编程思想 之「数组、容器」

    我们说,“Java 是面向对象的编程语言”,Java 中的所有行为都是围绕对象进行的,那么 Java 是如何持有对象的呢?实际上,在 Java 中,持有对象的方...

    CG国斌
  • 总结hibernate框架的常用检索方式

    1、hibernate框架的检索方式有以下几种: OID检索:根据唯一标识OID检索数据 对象导航检索:根据某个对象导航查询与该对象关联的对象数据 HQL检索:...

    赵小忠
  • Django -- 快速测试&页面美化

    经过前几篇的介绍,我们以及能够建立简单的网站页面,那如果嫌弃网站页面简陋,那我们就必须要为他加上样式来渲染网络页面,在Django中,我们把这些文件统称为"静态...

    cctester
  • Glide源码解析(三)

    本篇是 Glide 系列的最后一篇,主要讲一下 into 方法里面的逻辑。into 的逻辑也是最多最复杂的,可能需要反复阅读源码才能搞清楚。

    俞其荣
  • 关于motif你需要知道的事

    在chip_seq数据分析中,motif分析是一项重要的分析内容。通过motif分析,我们可以对转录因子结合位点的序列模式有进一步的了解,那么什么是motif呢...

    生信修炼手册
  • sklearn调包侠之PCA降维

    PCA(主成分分析),它是一种维度约减算法,即把高维度数据在损失最小的情况下转换为低纬度数据的算法。

    罗罗攀

扫码关注云+社区

领取腾讯云代金券