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上传方法
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>
上一篇:OSS服务端签名后直传


下一篇:上传文件到阿里云oss