vue+elementUi+oss上传

一、 需求：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上传方法
async function ossUpload(file) {
  //调用接口，获取配置
  let configInfo = await getConfig({});
  let fileType = file.type.split("/")[1];
  //拼接文件名称（拼接你需要保存的目录路径,'moduleGroup/'这是我的目录路径）
  let fileNameUrl = "moduleGroup/" + (await getFileNameUUID()) + "." + fileType;
  let res = await client(configInfo.data).put(fileNameUrl, file);
  return res.url;
}

• 调用方法

<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("请选择文件");
	      }
	      //这样就可以获取到上传后的url
	        let imgUrl = await ossUpload(file.file);
	        console.log('这是图片url',imgUrl)
	    },
	
	}
}
</script>