OBS无法在线预览的一种解决方式

简述

作者：GavenF
日期：2023年7月22日

从2022年1月起，华为云基于安全考虑不支持在线访问桶中对象，当通过链接访问时，默认会以附件形式下载。
在做项目的时候有在线预览的需求，找了很多解决方案（例如官方说的几个方法，例如使用额外的插件），但都不怎么和自己的脾气，选择了一个笨办法（此处只针对图片，其他的文件请各位自行发散）：
使用Axios获取文件源后在浏览器中转为base64或者url。

测试环境的要求

• Axios （大佬也可以选择自己手搓）
• 桶为公共读

实操

备注：此处所有的链接都为随机构建。如果真的可以点进去，那就“泰裤辣“！

一些注意点

Axios的配置：

• 返回值类型选择（若不进行配置将默认返回string类型将导致转码错误）；

代码：

<template>
	<image :src="imageData" v-if="imageData !== ''">
</template>

<script setup lang="ts">
import axios from ’axios‘;
import { ref } from 'vue';

const obsUrl = 'bucketname.obs.cn-north-4.zxc.com';
const fileKey = 'demo.png';

const imageData = ref('')

axios.get(
	`${obsUrl}/${fileKey}`,
	{responseType: 'arraybuffer'}
).then((res) => {
	// 转ArrayBuffer为Blob类型
	const blob = new Blob([res.data], { type: res.headers['content-type'] })
	
    const reader = new FileReader()
    
    // 使用FileReader将文件内容读取出来
    reader.onload = (e) => {
		imageData .value = e.target?.result?.toString()??''
    }
    reader.readAsDataURL(blob)
})

</script>

<style>
</style>

一些废话

个人发发牢骚，无任何不好的含义
不太了解为啥在线预览会被任务是不安全的操作，但是禁用了此功能却还得让咱绕一圈，麻烦。

你看隔壁腾讯云咋不说这个呢，阿里也似乎没类似的玩意
整这么多，我还不是用着OBS，哎……

另外，个人对于国内的环境，有点难以描述……
找一个问题，各个博客上几乎都是同一篇，难受死，有声明搬运啥的还好，但是也看到好多没有注明出处……

注：
若代码有不正确的地方或者更简便的实现方式请指出，欢迎大家讨论！
搬运前请先和作者联系！！！
搬运前请先和作者联系！！！
搬运前请先和作者联系！！！