vue element-ui 上传图片到oss阿里云(第三方服务

一、阿里云设置：

1. 开通阿里云服务和向后台人员要登陆账号这里就不过多介绍了。

2. 登录阿里云后台后进入控制台页面，在后台的管理系统对象存储oss里新创建一个Bucket，创建完成后，accessKeyId和accessKeySecret即时保存下来，因为在后面的oss配置需要用到。

   
   image.png

3. 在后台管理系统中进入访问控制

   
   image.png

4. 点击用户->新建用户->填写相关信息，就生成了下图

   
   image.png

5. 点击生成用户右侧的授权，添加如图的授权策略

   
   image.png

6. 点击RAM角色管理->新建RAM角色，然后创建了一个如下图的角色

   
   image.png
   

   继续点击下一步添加，因为我这里已添加过了，无法再截图展示，大家按照提示页面添加就可以了。

7. 点击右侧授权，并选择如下图的授权策略

   
   image.png

8. 接下来，我们来设置跨域

8.1 进入 OSS 管理控制台 界面。

8.2 在左侧存储空间列表中，单击目标存储空间名称，打开该存储空间概览页面。

8.3 单击 基础设置 页签，找到 跨域设置 区域，然后单击 设置。

8.4 单击 创建规则，打开 设定跨域规则 对话框。

8.5 设置跨域规则。

*   来源：指定允许的跨域请求的来源。允许多条匹配规则，以回车为间隔。每个匹配规则允许使用最多一个“*”通配符。

*   允许 Methods：指定允许的跨域请求方法。

*   允许 Headers：指定允许的跨域请求 header。允许多条匹配规则，以回车为间隔。每个匹配规则使用最多一个“*”通配符。

*   暴露 Headers：指定允许用户从应用程序中访问的响应头（例如一个 Javascript 的 XMLHttpRequest 对象)。

*   缓存时间：指定浏览器对特定资源的预取（OPTIONS）请求返回结果的缓存时间。

  说明： 每个存储空间最多可以配置 10 条规则。

8.6 单击 确定。
说明： 您也可以对已有的规则进行编辑和删除操作。

image.png

截止到这里，阿里云创建Bucket、角色、授权、跨域等前期准备工作就全部完成了。

二、安装使用：

1. 使用 NPM 安装 ali-oss

npm install ali-oss

2. 新建一个文件来配置oss

let OSS = require('ali-oss');

let client = new OSS({
  accessKeyId: 'your access key',   // 你创建的Bucket时获取的
  accessKeySecret: 'your access secret',  // 你创建的Bucket时获取的
  bucket: 'your bucket name',  // 你创建的Bucket名称
  region: 'oss-cn-hangzhou'   //  你所购买oss服务的区域，默认oss-cn-hangzhou
});
    

3. 在配置oss的这个文件中继续添加上传图片的api

// 上传
export async function put (filePath, file) {
  try {
    let result = await client.put(filePath, file)
    return result
  } catch (err) {
    console.log(err)
  }
}

// 删除
export async function remove (filePath) {
  try {
    let result = await client.delete(filePath)
    return result
  } catch (err) {
    console.log(err)
  }
}

image.png

4. 在相关的组件中引入

import { client, put, remove } from '@/api/common/fileUtils'

5. 代码编写

<template>
    <div>
        <el-form-item label="上传合同" prop="name">
          <el-upload
            list-type="picture-card"
            action=""
            :before-upload="beforeUpload"
            :on-change="imgPreview"
            :http-request="upLoad"
            :on-remove="handleRemove"
            :auto-upload="true">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </div>
</template>

export default {
    data () {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: []  // 定义数组，上传成功的文件都放在此数组中，删除时也从此数组中取
    }
  },
methods: {
     // 上传合同图片
    upLoad (item) {  // item 是当前本地上传的这张图片
      // 随机命名
      var fileName = item.file.name  // 当前本地上传的这张图片的名称(没有时间日期)
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      month = (month < 10 ? '0' + month : month)
      var mydate = date.getDate()
      mydate = (mydate < 10 ? '0' + mydate : mydate)
      this.baseurl = 'img/' + year + '/' + year + month + '/' + year + month + mydate + '/'
       // 这里是把时间+图片名称拼接起来形成一个新的图片上传至oss，目的是区别于本地图片的名称，避免名称相同会误删，同时便于查看oss上最新上传图片的时间点
      var filePath = this.baseurl + new Date().getTime() + '-' + fileName

      var file = item.file // 当前本地上传的这张图片
      put(filePath, file).then(result => {  // 调oss api 上传图片
        console.log(result)
       // 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
        this.fileList.push(result.name)  
      })
    },
    // 删除合同图片
    handleRemove (file) {  // file 当前本地已上传的这张图片
      var fileName = file.name  // 当前本地已上传的这张图片的名称(带有时间日期)
      var removeName = ''
      this.fileList.forEach(function (name) { // forEach 在循环的数组中(fileList)找到oss和本地相同的文件名称
        if (name.match(fileName)) { 
          removeName = name // 给循环出匹配上文件名的name赋值，这里循环出的图片是带有时间日期
        }
      })
      console.log(removeName)
      remove(removeName).then(result => { // 把循环出来的图片传进来，然后进行删除
        console.log(result)
        if (result.res.status != '204') {
          console.log('删除失败')
        }
      })
    }
  }
}