阿里云上传图片

引言

为了更好的掌握 OSS 存储，可以先去了解一下这些基本概念

一、准备工作

创建 Bucket

1、首先需要一个阿里云帐号，没有的可以自己去注册一下

2、登录之后点击右上角 -- 控制台

控制台.png

3、鼠标移入箭头处（图1），会出现图2，然后点击 对象存储 OSS ，或者在搜索框搜索 对象存储 OSS 也可以

对象存储OSS 15.30.47.png

4、创建 Bucket，名称和区域根据自己的需求填写即可，其他的默认选择就行了，设置好后点击确定就创建成功了

创建 Bucket.png
Bucket 步骤.png

5、怎么查看创建的 Bucket，下图中点击红框里的内容就可以查看啦

Bucket 列表.png

6、进入列表，点击创建好的 Bucket ,点击进入，就可以设置创建的 Bucket 了，点击概览，就能找到需要在代码里用到的参数了

• region里填写的是参数1对应的绿框里的内容
• bucket里填写的是参数2对应的绿框里的内容，即你创建的 Bucket 名称

查看需要的参数.png

7、获取 accessKeyId 和 accessKeySecret

点击头像 --> AccessKey 管理 --> 创建 AccessKey ，第一次创建的时候，会提示下载 ID 与密码，建议下载，至此，所需的参数就都拿到了

• accessKeySecret 填写的是拿到的密码
• accessKeyId 填写的是 AccessKey ID ，即刚刚拿到的 ID

AccessKey 管理.png

二、Vue 上传图片到阿里云

1、安装 ali-oss

npm install ali-oss

2、创建工具类文件

在 utils 文件夹内创建一个 alioss.js 文件

function uploadFile (file, ossConfig, resultUrl) {
  const OSS = require('ali-oss')
  // 这里是通过接口拿到的这些参数，所以在调用该方法之前，需调用后台接口先拿到这些参数
  // 如果这些参数不是通过后台接口拿到的话，可以从上边介绍的第6条中，找到需要的参数放过来就可以了
  const client = new OSS({
    region: ossConfig.region,
    accessKeyId: ossConfig.accessKeyId,
    accessKeySecret: ossConfig.accessKeySecret,
    bucket: ossConfig.bucket
  })
  async function put () {
    try {
      // 这里加个时间戳，目的是以防有同名的文件被覆盖
      var timestamp = (new Date()).getTime()
      var fileName = ossConfig.path + '/' + timestamp + '/' + file.name
      // 上传到OSS
      const result = await client.put(fileName, file)
      console.log(result)
      console.log('阿里云OSS上传文件接口返回：', result)

      resultUrl(result)
    } catch (e) {
      console.log('阿里云OSS上传文件接口返回错误：', e)
      resultUrl()
    }
  }
  return put()
}
export {
  uploadFile
}

3、在 vue 文件中引入并使用

• 引入

import { uploadFile } from '@/utils/utils'

• 使用 Element 的图片上传组件，这里就不介绍 element 图片上传组件的使用了，直接讲调用 uploadFile 方法

uploadImg (e) {
  console.log(e)
  if (e.file.type !== 'image/jpeg' && e.file.type !== 'image/png' && e.file.type !== 'image/jpg' &&
    e.file.type !== 'image/bmp' && e.file.type !== 'image/gif') {
    this.$message.error('请选择图片文件')
    return
  }
  const isLt5M = e.file.size / 1024 / 1024 < 5
  if (!isLt5M) {
    this.$message.error('上传图片大小不能超过 5MB!')
    return
  }
  // 如果 oss 配置参数没有经过后台接口，则忽略 ossConfig 参数，如果是接口获取的，则先调用接口拿到参数
  uploadFile(e.file, this.ossConfig, function (res) {
    if (res === undefined) {
      return ''
    } else {
      // 更新展示的图片地址, res.name 为图片的名称，此处写自己的逻辑代码即可
      console.log(res.name)
    }
  })
}