在开发中，一般来说图片上传都是前端转成base64后通过接口的方式传给后端，再由后端进行操作，然后决定是保存在服务器还是云端。现在教一种可以直接通过前端上传到阿里云OSS对象存储。
准备工作
一个阿里云账号，开通OSS对象存储服务，创建RAM账号并设置账号的权限。
安装插件
npm install ali-oss --save
使用
将功能封装，使用时调用，创建 useoss.js文件
封装
const OSS = require("ali-oss");
let client = new OSS({
// region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。
region: "XXXXXXX",
// 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。
accessKeyId: "XXXXXXXXXXXXXXXXXXXX",
accessKeySecret: "XXXXXXXXXXXXXXXXXXX",
bucket: "存储的bucket名",
});
// 直接上传
async function upload(fileName, data) {
try {
// object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
await client.put(fileName, data);
} catch (e) {
console.log(e);
}
}
// 上传返回url
async function uploadUrl(fileName, data) {
try {
// object-key可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
let result = await client.put(fileName, data);
return result.url
} catch (e) {
console.log(e);
}
}
export default {
upload,
uploadUrl,
}
上传
<template>
<input type="file" @change="onchange($event)" />
</template>
<script >
import Oss from "@/hooks/useoss";
export default {
name: "App",
setup() {
async function onchange(event) {
const data = event.target.files[0];
await Oss.uploadUrl(data.name, data); //上传
}
return {
onchange,
};
},
};
</script>
大功告成
