前言:
此刻朋友们对“七牛云上传文件”大致比较关心,你们都需要学习一些“七牛云上传文件”的相关文章。那么小编同时在网摘上搜集了一些有关“七牛云上传文件””的相关内容,希望兄弟们能喜欢,同学们一起来了解一下吧!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打包出来的静态资源文件上传到七牛云。
版权声明:
本站文章均来自互联网搜集,如有侵犯您的权益,请联系我们删除,谢谢。