二、前提:
《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的配置信息
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。