龙空技术网

Vue编译出静态文件上传七牛CDN

沐浴中的眼泪 1477

前言:

此刻朋友们对“七牛云上传文件”大致比较关心,你们都需要学习一些“七牛云上传文件”的相关文章。那么小编同时在网摘上搜集了一些有关“七牛云上传文件””的相关内容,希望兄弟们能喜欢,同学们一起来了解一下吧!

Vue作为目前比较流行的前端开发框架,在前后端分离比较时尚的今天异常火热,下面分享下怎么把Vue编译出来的静态文件上传到CDN,在这里主要是七牛云的CDN。

Vue项目进行编译

编译命令:

npm run build

如果使用yarn做为包管理器的话,使用:

yarn run build
申请七牛云存储

想要用七牛云服务,申请账号必不可少,这里不做过多解释,申请完账号就会有对应的开发者秘钥。

七牛-个人中心-秘钥管理

下面简单说说使用七牛云的对象存储,访问地址:

七牛-对象存储

1、新建空间,七牛云存储是以空间的概念进行区分和管理的。

七牛-创建存储空间

2、创建完空间,即生成一条空间记录,空间名称即是一个bucket。

七牛-存储空间列表

静态文件上传

首先安装七牛云node包:

npm install qiniu --save

上传七牛云核心代码:

var fs = require('fs')var path = require('path')var qiniu = require('qiniu')qiniu.conf.ACCESS_KEY = '七牛key' qiniu.conf.SECRET_KEY = '七牛secret'function upload(key, localFile) {  const bucket = '七牛空间名称'  const putExtra = new qiniu.form_up.PutExtra()  const config = new qiniu.conf.Config()  config.zone = qiniu.zone.Zone_z1 // 设置时区  const formUploader = new qiniu.form_up.FormUploader(config)  const putPolicy = new qiniu.rs.PutPolicy({ scope: `${bucket}:${key}` })  const uploadToken = putPolicy.uploadToken()  formUploader.putFile(uploadToken, key, localFile, putExtra, function(respErr, respBody, respInfo) {    if (respErr) {      throw respErr    }    if (respInfo.statusCode === 200) {      console.log(respBody)    } else {      console.log(respInfo.statusCode + ' --- ' + respBody)      if (respBody.error) {        console.log(respBody.error)      }    }  })}

集成到Vue项目结构中(创建js文件,如qiniu.js):

function replaceAll(str, replaceKey, replaceVal) {  var reg = new RegExp(replaceKey, 'g') // g就是代表全部  return str.replace(reg, replaceVal || '')}function displayFile(param) {  fs.stat(param, function(err, stats) {    if (stats.isDirectory()) {      fs.readdir(param, function(err, file) {        file.forEach((e) => {          var absolutePath = path.join(param, e)          displayFile(absolutePath)        })      })    } else {      param = replaceAll(param, '\\\\', '/')      var key = param.split('dist/')[1]      var localFile = './' + param      upload(key, localFile)    }  })}function main() {  displayFile('./dist')}main()

最后一步,执行node命令上传:

node ./qiniu.js
上传文件检查

七牛-上传成功后文件管理

注意:上传文件后一定要验证文件类型是否正确,不然vue页面引用的时候,会出现无法解析的问题。

到这里,即可实现Vue打包出来的静态资源文件上传到七牛云。

标签: #七牛云上传文件 #七牛大文件上传