OSS上传

前端直接上传

封装 OSS

const OSS = require("ali-oss");
//OSS配置
const OSSConfig = {
  uploadHost: "http://xxxxxx.oss-cn-shenzhen.aliyuncs.com", //OSS上传地址
  folder: process.env.VUE_APP_OSS_FOLDER, // 上传的文件夹地址 例如 test/file/xxx/、test/img/xxx/
  ossParams: {
    region: "oss-cn-shenzhen",
    success_action_status: "200", // 默认200
    accessKeyId: "LxxxxxxJxxxxxxaFoxxxxxxD",
    accessKeySecret: "JxxxxxxPxxxxxxhZTxxxxxxFAxxxxxxv",
    bucket: "xxxxxx",
  },
};

// 随机数函数
function random_string(len) {
  len = len || 32;
  var chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
  var maxPos = chars.length;
  var pwd = "";
  for (let i = 0; i < len; i++) {
    pwd += chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

// 直接调取oss函数，返回URL结果
function uploadOSS(file) {
  return new Promise(async (resolve, reject) => {
    const fileName = `${OSSConfig.folder}${random_string(6)}_${file.name}`;
    let client = new OSS({
      region: OSSConfig.ossParams.region,
      accessKeyId: OSSConfig.ossParams.accessKeyId,
      accessKeySecret: OSSConfig.ossParams.accessKeySecret,
      bucket: OSSConfig.ossParams.bucket,
      secure: true,
    });
    const res = await client.multipartUpload(fileName, file);
    if (res.name) {
      resolve({
        fileName: file.name,
        url: `${OSSConfig.uploadHost}/${fileName}`,
      });
    } else {
      reject("OSS上传失败");
    }
  });
}

// 用于上传文件进度条的oss函数
function client() {
  //后端提供数据
  return new OSS({
    region: OSSConfig.ossParams.region,
    accessKeyId: OSSConfig.ossParams.accessKeyId,
    accessKeySecret: OSSConfig.ossParams.accessKeySecret,
    bucket: OSSConfig.ossParams.bucket,
    secure: true,
  });
}

export { OSSConfig, random_string, uploadOSS, client };

例子

<template>
  <div class="content-box">
    <div class="container">
      <div class="title">
        点击上传图像（支持image/jpg,image/jpeg,image/png,image/gif格式图片且大小不能超过10MB）
      </div>
      <el-upload
        :http-request="Upload"
        :data="dataObj"
        :multiple="false"
        :show-file-list="false"
        class="image-uploader"
        drag
        action=""
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将图片拖到此处，或
          <em>点击上传</em>
        </div>
      </el-upload>
      <el-progress
        v-if="isImportLoading"
        :percentage="progress"
        color="#61C5C1"
      ></el-progress>
      <img
        :src="imgSrc"
        alt=""
        style="width:300px;height:300px"
        v-if="imgSrc"
      />
    </div>
  </div>
</template>

<script>
import { OSSConfig, client, random_string } from "@/utils/ossFile";

export default {
  props: {},
  data() {
    return {
      // dataObj: {}, // 存签名信息
      progress: 0, //进度条
      isImportLoading: false,
      imgSrc: "",
    };
  },
  created() {},
  methods: {
    // 是为了获取Ali配置信息的，但是封装ossFile 时已写好配置，就不需要了
    // beforeUpload() {
    //   return new Promise((resolve, reject) => {
    //     //从后台获取第一步所需的数据
    //     getAliToken()
    //       .then(response => {
    //         this.dataObj = response.data
    //         resolve(true)
    //       })
    //       .catch(err => {
    //         console.log(err)
    //         reject(false)
    //       })
    //   })
    // },
    Upload(file) {
      const that = this;
      //判断扩展名
      const lastName = file.file.name.lastIndexOf(".");
      const expandedName = file.file.name.substring(lastName + 1);
      const typeNames = ["jpg", "jpeg", "webp", "png", "bmp"];
      if (typeNames.indexOf(expandedName) < 0) {
        this.$message.error("不支持的格式!");
        return;
      }
      async function multipartUpload() {
        // 上传的路径地址 + 随机数 + 文件名称
        const fileName =
          process.env.VUE_APP_OSS_FOLDER + random_string(6) + file.file.name;
        //定义唯一的文件名
        // client 是第一步中的 client
        // progress 函数就是进度条回调的函数，提供进度条数据
        client()
          .multipartUpload(fileName, file.file, {
            progress: function (p) {
              that.isImportLoading = true;
              //获取进度条的值
              // console.log(p)
              that.progress = parseInt(p * 100);
            },
          })
          .then((result) => {
            //下面是如果对返回结果再进行处理，根据项目需要
            that.isImportLoading = false;
            console.log(result);
            // http://xxxxxx.oss-cn-shenzhen.aliyuncs.com/xxx/xxx/rjdpXG_图片测试1.jpg
            that.imgSrc = OSSConfig.uploadHost + fileName;
          })
          .catch((err) => {
            console.log("err:", err);
          });
      }
      multipartUpload();
    },
  },
};
</script>

<style lang="scss" scoped></style>

EGG 上传

文件流

//controller
"use strict";
const path = require("path");
const oss = require("ali-oss");
const BaseController = require("./base");

class UploadController extends BaseController {
  async doAdd() {
    const { ctx, service, app } = this;
    let parts = ctx.multipart({ autoFields: true });
    let stream;

    //可以配置在config
    const client = new oss({
      accessKeyId: "xxx",
      accessKeySecret: "xxx",
      bucket: "xxx",
      region: "oss-cn-shenzhen",
    });

    while ((stream = await parts()) != null) {
      if (!stream.filename) {
        break;
      }
      let name = `test${path.extname(stream.filename)}`;
      client
        .putStream(name, stream)
        .then(function (r1) {
          console.log("put success: %j", r1);
          return client.get("object");
        })
        .then(function (r2) {
          console.log("get success: %j");
        })
        .catch(function (err) {
          console.error("error: %j");
        });
    }
    ctx.body = "ok";
  }
}

module.exports = UploadController;

文件

"use strict";

"use strict";
const path = require("path");
const oss = require("ali-oss");
const BaseController = require("./base");

let aliInfo = {
  // https://help.aliyun.com/document_detail/31837.html
  region: "oss-cn-shenzhen",
  bucket: "qxxxxxxxxx",
  accessKeyId: "LxxxxxxxxxxxxB",
  accessKeySecret: "Ixxxxxxxxxxxxxxxxi",
};

let client = new OSS(aliInfo);

class UploadController extends BaseController {
  async upload() {
    const { ctx } = this;
    const file = ctx.request.files[0];
    let result;
    try {
      // https://help.aliyun.com/document_detail/111265.html
      // 处理文件，比如上传到云端
      result = await client.put(file.filename, file.filepath);
    } finally {
      // 需要删除临时文件
      await fs.unlink(file.filepath);
    }
    ctx.body = {
      url: result.url,
      // 获取所有的字段值
      requestBody: result,
    };
  }
}

module.exports = UploadController;