环境:VUE3+NODEJS16
一、第一步肯定是引入依赖
在package.json文件中的dependencies加上"ali-oss": "^6.17.1"
如下代码所示:
//加入后的整体展示"dependencies": {"ali-oss": "^6.17.1"},
然后在控制台执行npm install
或 yarn install
,执行命令后依赖安装成功。
二、创建一个js文件,如:aliOss.js
文件代码如下:
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
,并调用上传方案,代码如下:
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");// });});