element 上传文件到阿里云OSS记录

vue 通过element el-upload上传到阿里云仓库的步骤

  1. 安装ali-oss
npm install ali-oss
  1. 新建配置文件,如ali_oss.js,我这里只是用了他的getFilePath跟getFileNumber部分
    可以在这里配置oss client,也可以在vue代码中通过接口动态获取,本文使用的是后者,不过提供前者的实现,可以参看下面代码的配置部分
let OSS = require('ali-oss')
let region = '你的region '
//云账号AccessKey有所有API访问权限,建议遵循阿里云安全最佳实践,部署在服务端使用RAM子账号或STS,部署在客户端使用STS
let accessKeyId = '你的accessKeyId '
let accessKeySecret = '你的accessKeySecret '
let bucket = '你的bucket '

//client配置
let client = new OSS({
  region: region,
  accessKeyId: accessKeyId,
  accessKeySecret: accessKeySecret,
  bucket: bucket
})

export default (conf) => {
  return new OSS(conf)
};
//文件上传
export const put = async(filePath, fileUrl) => {
  try {
    let result = await client.put(filePath, fileUrl)
    return result
  } catch (e) {
    console.log(e)
  }
}

//oss的地址
export const getSystemPath = () => {
  return ossPath
}

//文件的上传地址
export const getFilePath = (ObjName, orangeName) => {

  let fileName = getFileNumber() + getFileSuffix(orangeName)
  let result = `/shuyu/admin/${fileName}`
  return result
}

//oss文件名获取随机
export const getFileNumber = () => {
  let timeNumber = new Date().getTime()
  let randomNumber = Math.floor(Math.random() * 999999)
  return timeNumber + '' + randomNumber
}

//获取文件后缀
export const getFileSuffix = (fileName) => {
  let name = fileName.lastIndexOf('.')//取到文件名开始到最后一个点的长度
  let length = fileName.length
  let fileSuffix = fileName.substring(name, length)
  return fileSuffix

}

//检查文件格式
export const checkFileFormat = (fileName) => {
  let isJPG = false
  let type = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
  if (type === 'jpg' || type === 'png' || type === 'jpeg') {
    isJPG = true
  } else if (type === 'mp4' || type === '3gp' || type === 'avi') {
    isJPG = true
  }
  return isJPG
}

//获取录音和视频的时长
export const getTimeFromVideo = (file) => {
  let time = 0
  var url = URL.createObjectURL(file)
  var audioElement = new Audio(url)
  audioElement.addEventListener('loadedmetadata', (_event) => {
    time = parseInt(audioElement.duration)
    return time
  })
  console.log(time)
}

  1. (如果是直接在JS配置可以跳过这一步,如果通过后台接口返回accessKeyId 等参数就需要这一步)
    data部分
 uploadConf: {
        region: 'oss-cn-beijing',
        accessKeyId: null,
        accessKeySecret: null,
        bucket: 'linkdoc-felling',
        stsToken: null
      }

methods部分

 getOssToken().then(res => {
        this.uploadConf.accessKeyId = res.AccessKeyId
        this.uploadConf.accessKeySecret = res.AccessKeySecret
        this.uploadConf.stsToken = res.SecurityToken
      })
  1. 配置el-upload,自定义http-request方法
<el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :http-request="fileUpLoad"
          >
            <img v-if="form.credentialsRealUrl" :src="form.credentialsRealUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
  1. 实现http-request对应的方法
    如果参照下面的代码,一定别忘记引入我们的js文件
import ossClient, { getFilePath, getSystemPath } from '@/utils/ali_oss'
//上传文件操作,调用阿里云
    fileUpLoad(option) {
      //提前拼接返回地址
      let filePath = getFilePath(this.$route.name, option.file.name)
      if (option.file.size > 2024000) {
        this.$message.error('资源文件大小超出范围')
        return
      }
      ossClient(this.uploadConf).put(filePath, option.file).then((res) => {
        console.log(res)
        if (res !== undefined) {
          this.$message.success('上传成功')
        }
      })
    },

至此,上传成功,filePath已经获取到了,如果是加密的数据,则继续调用自己的接口,获取真实可读的图片地址

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容