一、 需求:oss子账号上传图片
二、前提:
《1》配置Bucket (很重要,不设置的话会出现跨域问题)
- 将allowed origins(来源)设置成 *
- 将allowed methods(允许methods)设置成 PUT, GET, POST, DELETE, HEAD
- 将allowed headers(允许headers)设置成 *
- 将expose headers(暴露headers)设置成 ETag (这里需要换行) x-oss-request-id
1、后端返回oss的配置信息
- region : 以华东1(杭州)为例,Region填写为oss-cn-hangzhou。
- accessKeyId:必须参数,后端会给的
- accessKeySecret:必须参数,后端会给的
- stsToken ://这个官网上写的js也可以获取但是我没有实现,如果有会的求大佬赐教
- bucket:// 填写Bucket名称。
2、封装(utils/ossUpload.js)
- 下载
yarn add oss
- 封装方法
const OSS = require("ali-oss");
import {getConfig} from '@/api/getOssConfig.js' //这就是后端给你的接口,自己封装后调用下
//获取配置条件
const client=(data)=> {
return new OSS({
region: data.region,
accessKeyId: data.accessKeyId,
accessKeySecret: data.accessKeySecret,
stsToken: data.stsToken,
bucket: data.bucket,
});
}
//获取uuid随机数作为文件名称
const getFileNameUUID = () => {
function rx() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return `${+new Date()}_${rx()}${rx()}`;
};
//创建oss上传方法
const ossUpload=(file)=>{
//调用接口,获取配置
getConfig({}).then((res)=>{
//获取文件类型
let fileType = file.type.split("/")[1];
//拼接文件名称(拼接你需要保存的目录路径,'moduleGroup/'这是我的目录路径)
let fileNameUrl = "moduleGroup/" + getFileNameUUID() + "." + fileType;
clint(res.data).put(fileNameUrl,file).then((res)=>{
这是请求结果,可根据需求处理
})
})
}
- 调用方法
<template>
<div>
<el-upload
action=""
:http-request="handleUploadFile"
/>
</div>
</template>
<script>
import ossUpload from "@/utils/ossUpload.js";
export default {
data(){
return {
}
},
method:{
handleUploadFile(file) {
if (!file.file) {
return this.$message.error("请选择文件");
}
ossUpload(file.file);
},
}
}
</script>