如何使用 Node.js 编写脚本,对文件资源进行操作、并上传到阿里云 OSS 对象存储

774 阅读2分钟

目前接到一个需求,前后端分离业务中的前端代码构建完成后,前端资源需要通过脚本的形式将资源上传到阿里云 OSS 对象存储。然后通过 CDN 的形式访问前端资源。好处是能大大减少服务器的压力,坏处目前还没有得到反馈。

好 开干。

首先看阿里云文档这里支持的语言,我们选中 node.js

image.png

里面的示例还是挺详细的

image.png

我们就按照示例结合需求进行脚本编写。

这里面前端项目我用的是 Vue3 全家桶,构建工具用的是 webpack 具体细节就不描述了。

首选确认需求,既然是所有资源都放入了 OSS 然后通过 CDN 进行资源访问,那理所应当,先从构建入手,让最后构建出来的 index.html 里面所有的 link 指向 CDN ,这样的话才能访问到我们上传到阿里云的资源。

1、找到 vue.config.js 配置你的 CDN 路径。

image.png

2、构建看是否生效,这里默认构建出来的包在 dist 文件夹中,看我们 index.html 里面的link 是否指向了我们 CDN 的路径。 这里看到已经生效了

image.png

3、构建脚本上传 dist 文件 首先第一步学它 先加载 ali-oss 和 fs 。这里我还加入了 dotenv 用来读取环境变量。因为像 accessKeyId 和 accessKeySecret 这种敏感的信息,我们是不会放在代码中的,这种敏感信息一般都是放在环境变量中来读取的 切记!

image.png

第二步 循环遍历我们的 dist 文件夹目录,读取文件名将文件名形成一个数组

image.png

第三步 把阿里云里面那边部分上传的代码抄下来修改一下。

image.png

第四步 将读取的文件名通过 put 方法进行上传

image.png

好了 我们现在使用终端执行一下

image.png

搞定!