AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

VUE项目上传文件/图片等至阿里云OSS

参考的阿里云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('上传失败,请稍后重试')
    })
  }
}

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注