前端上传图片至OSS

环境：VUE3+NODEJS16

一、第一步肯定是引入依赖

在package.json文件中的dependencies加上"ali-oss": "^6.17.1"如下代码所示：

vue 复制代码

 //加入后的整体展示
 "dependencies": {
    "ali-oss": "^6.17.1"
  },

然后在控制台执行npm install 或 yarn install,执行命令后依赖安装成功。

二、创建一个js文件，如：aliOss.js

文件代码如下：

vue 复制代码

const OSS = require('ali-oss')
const path = require("path")

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
  accessKeyId: 'yourAccessKeyId',
  accessKeySecret: 'yourAccessKeySecret',
  // 填写Bucket名称。
  bucket: 'examplebucket',
});

const headers = {
  // 指定Object的存储类型。
  'x-oss-storage-class': 'Standard',
  // 指定Object的访问权限。
  'x-oss-object-acl': 'private',
  // 通过文件URL访问文件时，指定以附件形式下载文件，下载后的文件名称定义为example.jpg。
  // 'Content-Disposition': 'attachment; filename="example.jpg"'
  // 设置Object的标签，可同时设置多个标签。
  'x-oss-tagging': 'Tag1=1&Tag2=2',
  // 指定PutObject操作时是否覆盖同名目标Object。此处设置为true，表示禁止覆盖同名Object。
  'x-oss-forbid-overwrite': 'true',
};

async function put () {
  try {
    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
    // 如果本地文件的完整路径中未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
    const result = await client.put('exampleobject.txt', path.normalize('D:\\localpath\\examplefile.txt')
    // 自定义headers
    //,{headers}
    );
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}

三、在其他页面中引入aliOss.js，并调用上传方案，代码如下：

vue 复制代码

import { put } from "@/utils/aliOSS.js";

  //file是文件对象
   put(`路径名称/文件名称`, file).then((res) => {
     //res.url上传成功的地址
        console.log(res.url, "put");
        // 上传成功之后，转换真实的地址
        // signatureUrl(`fridgeAdmin/${objName}`).then((res) => {
        //   console.log(res, "signatureUrl");
        // });
      });