通过el-upload上传图片到阿里云oss

对象存储服务（Object Storage Service，OSS）是一种海量、安全、低成本、高可靠的云存储服务，适合存放任意类型的文件。容量和处理能力弹性扩展，多种存储类型供选择，全面优化存储成本。

开通阿里云oss

首先需要在阿里云控制台开通oss服务，这里不做过多叙述，开通后需要创建Bucket，然后即可上传文件至oss。

上传图片到oss

如何在项目中上传图片至oss中：
1.在项目中安装oss

npm install ali-oss --save

2.获取到访问oss的accessKeyId和accessKeySecret：

3.在项目中上传图片至oss：

首次连接遇到的跨域问题

在首次连接oss时，出现跨域问题，解决方案如下：
1.创建跨域设置

进行如下设置：

2.添加RAM权限


添加：AliyunOSSFullAccess和AliyunSTSAssumeRoleAccess权限

即可解决跨域问题

oss绑定域名

在oss中进行域名绑定：

点击图片，进行预览

完整项目代码

oss.js(*号为个人账号数据)

let OSS = require('ali-oss')
export let client = new OSS({
     
  region: 'oss-cn-hangzhou',
  accessKeyId: '*******',
  accessKeySecret: '*********',
  bucket: '********'
})

HelloWorld.vue

<template>
  <div style="position:relative;">
    <el-upload action="" class="upload-demo"
               style="display: inline-block;margin-left: 2px;"
               accept=".png,.jpg"
               multiple :limit="3"
               :show-file-list="false"
               :on-exceed="handleExceed"
               :http-request="httpRequest">
    <el-button size="mini">上传图片</el-button>
    </el-upload>
  </div>
</template>
<script>
import {
      client } from '@/js/oss.js'  // 引入oss.js文件
export default {
     
  methods: {
     
    // 下面的函数为图片上传所用函数
    handleExceed (files, fileList) {
     
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${
       files.length} 个文件，共选择了 ${
       files.length + fileList.length} 个文件`)
    },
    httpRequest (e) {
     
      // console.log(e)
      let file = e.file // 文件信息
      if (!file) {
     
        return false
      } else if (!/\.(png|jpg)$/.test(file.name.toLowerCase())) {
     
        // 格式根据自己需求定义
        this.$message.error('上传格式不正确，请上传png或者jpg格式')
        return false
      }
      let filename = file.name
      console.log(filename)
      client.put('111.png', file)
      client.list().then(res => {
     
        console.log(res)
      })
    }
  }
}
</script>