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

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

1. 安装ali-oss

npm install ali-oss

2. 新建配置文件，如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)
}

3. （如果是直接在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
      })

4. 配置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>

5. 实现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已经获取到了，如果是加密的数据，则继续调用自己的接口，获取真实可读的图片地址