VUE项目上传文件/图片等至阿里云OSS
2020年6月30日
参考的阿里云OSS官方的Node.js和Browser.js SDK文档:
https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.1291.5add69fb0EfBiL
https://help.aliyun.com/document_detail/64041.html?spm=a2c4g.11186623.6.1367.6d9910d5Pots4X(跨域设置,参考这里)
1、安装:
npm install ali-oss
2、控制台设置bucket
*跨域设置很重要!!
OSS管理控制台=>Bucket列表里单击你要使用的Bucket=>进入Bucket详情=>权限管理=>跨域设置
3、在项目文件的utils.js里封装一个阿里云配置的方法,以便各个页面都可以使用
/* * 阿里云OSS配置,配置信息请按自己帐号下的bucket信息配置 * */ export const upLoadFileToOSS = () => { let OSS = require('ali-oss') let client = new OSS({ region: process.env.NODE_ENV === 'production' ? 'oss-cn-shenzhen' : 'oss-cn-beijing', // 这里根据开发/生产环境配置了不同的region accessKeyId: '这里是accessKeyId', accessKeySecret: '这里是accessKeySecret', bucket: process.env.NODE_ENV === 'production' ? '这里是bucket名' : '这里是bucket名', // 这里根据开发/生产环境配置了不同的bucket名字 endpoint: process.env.NODE_ENV === 'production' ? '这里是endpoint域名' : '这里是endpoint域名' // 这里根据开发/生产环境配置了不同的endpoint }) return client }
4、上传文件(中间获取文件、转换格式步骤省略)
/* * 上传图片至OSS * @param {String} objectName 图片名称 * @param {Object} localFile 本地文件 * */ uploadToOSS (imgName, localFile) { if (!localFile || localFile === undefined || localFile === null) { Toast('文件不能为空')// 弹窗用的mint ui } else { upLoadFileToOSS().put(imgName, localFile).then(result => { Indicator.close()// 弹窗用的mint ui if (result.name) { console.log(result.url) console.log(result.name) } else { Toast('上传失败,请稍后重试') } }).catch(err => { console.log(err) Toast('上传失败,请稍后重试') }) } }