vue+el+oss上传/预览/下载/删除/存数据库（前端操作oss的详细实现）

注：
1. 一般情况不会让前端直接操作oss（增删查）,可是我遇到了这样的需求
2. 默认已经开通oss，在oss官网完成了配置
3. 需要使用到element-ui的upload组件

点击跳转oss的官方API

点击跳转element的官方API

需求描述

1. 前端直接操作oss，类型可以是任何类型。本demo以图片和压缩包为例，图片可以预览、删除；压缩包可以下载、删除。
2. 在表单填写时，一个表单可能有多个不同类型文件的需要上传；表单涉及新增/查看/编辑功能，复用性要强。
3. 新增表单的具体需求：表单新增之后oss即可编辑，一旦新增过文件后要么删除已上传文件，要么提交表单，提交不成功根据后端提示重新修改表单的错误重新提交，或者删除放弃提交。
4. 查看表单的具体需求：查看表单不可操作oss，但是对于图片可以进行预览，压缩包可以进行下载。
5. 修改表单的具体需求：一旦修改过文件（删除，新增，修改）必须提交表单，提交不成功根据后端提示重新修改表单的错误重新提交，直到成功为止。
6. F5强刷也要保证上述5条，私密麻生，我太难了，我没做

效果展示

新增

查看

、

编辑

图片预览（放大）

新增但不提交的提示

删除但不提交的提示

修改但不提交的提示

前期准备

1. npm install ali-oss
2. 需要运维提供accessKeyId，accessKeySecret，bucket
3. 其中bucket最好区分开发环境和生产环境
4. oss官方推荐使用STS临时授权访问，我这里没有用，有兴趣的话可以移步OSS临时授权

utils.js（工具类)

import axios from 'axios'
import OSS from 'ali-oss'
import UUID4 from 'uuid/v4'

// 下载oss指定地址
export function downloadURL(url) {
  let link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// 上传oss
export function ossUpload(picForProject, fileBuffer) {
  let bucketName = '';
  // 判断环境 生产环境并且不为测试状态
  process.env.NODE_ENV === 'production' ? bucketName = '填你自己申请的' : bucketName = '填你自己申请的';

  let client = new OSS({
    region: 'oss-cn-beijing',
    secure: true, // https
    accessKeyId: '填你自己申请的',
    accessKeySecret: '填你自己申请的',
    bucket: bucketName
  });

  const fileName = UUID4().toUpperCase().replace(/-/g, '')
  const suffix = fileBuffer.name.substr(fileBuffer.name.indexOf('.'))
  const url = `${picForProject}${fileName}${suffix}`

  async function put() {
    try {
      await client.put(url, fileBuffer)
      // await xxx(url) 在这里也可以直接把地址传给后端
      return { 'code': 200, 'url': url }
    } catch (e) {
      return e.message
    }
  }

  return put()
};

// 获取oss地址
export function showPrivateOss(picName) {
  // 这里和上传oss的client是一样的，应该放在store里面同一管理的，demo这里写在这里了
  let bucketName = '';
  process.env.NODE_ENV === 'production' ? bucketName = '填你自己申请的' : bucketName = '填你自己申请的';

  let client = new OSS({
    secure: true, // https
    accessKeyId: '填你自己申请的',
    accessKeySecret: '填你自己申请的',
    bucket: bucketName,
    endpoint: 'oss-cn-beijing.aliyuncs.com'
  });

  async function getOssAddr() {
    try {
      let signUrl = client.signatureUrl(picName, { expires: 1800 }); // expires单位为秒
      return { 'code': 200, 'url': signUrl }
    } catch (e) {
      return e.message
    }
  }

  return getOssAddr()
};

// 删除oss
export function deletePrivateOss(picName) {
  let bucketName = '';
  process.env.NODE_ENV === 'production' ? bucketName = '填你自己申请的' : bucketName = '填你自己申请的';

  let client = new OSS({
    secure: true, // https
    accessKeyId: '填你自己申请的',
    accessKeySecret: '填你自己申请的',
    bucket: bucketName,
    endpoint: 'oss-cn-beijing.aliyuncs.com'
  });

  async function deleteOssAddr() {
    try {
      return client.delete(picName);
    } catch (e) {
      return e.message
    }
  }

  return deleteOssAddr()
};

oss.vue（oss组件）

addOrEdit.vue（表单组件；新增/查看/编辑为同一个组件）

/*
**这是一个弹窗组件，为了代码简洁，删除了其他表单内容
**父组件传来id，即判定是查看/编辑，需要请求后端详情
**:before-close需要带参数，重要！！
*/