华为云 obs上传图片（vue）

各大平台oss都已支持前端直接调用第三方sdk上传文件，但是华为云前端上传可查资料比较少，就连文档感觉只对后端友善。
华为云前端上传sdk文档

首先查看文档时，千万不要天真的以为天下文档规范就一家（阿里云）。先看下图：

image.png

官方文档查找描述

1. 阿里云的nodejs -sdk库文档是直接指向前端开发示例的。
2. 当前查看前端上传的示例需要查看BrowserJS SDK开发指南
3. 然后进入2021-12-2 OBS BrowserJS SDK最新版本源码点击 examples=>upload-download-sample.html

根据以上3步才能真正的看到开发示例，官网目前基本上没有完整的前端开发示例。

代码区域

1. 下载对应的sdk： npm install esdk-obs-browserjs --save-dev
2. 创建utils/oss公用文件和定义方法类。如下：

import * as ObsClient from 'esdk-obs-browserjs'
export const client = new ObsClient({
    access_key_id: 'ak',
    secret_access_key: 'sk',
    server : 'https://myhuaweicloud.com'    // 输入自己的访问地址
});


export const bucketName = 'bucketName';    // 文件类名

// 随机生成上传的文件名
export const random_name = ()=>{
    return `${random_string(6)}_${new Date().getTime()}`
};
// export default OSS

function random_string(len) {
    len = len || 32;
    let chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
    let maxPos = chars.length;
    let pwd = "";
    for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

3.调用。如下：

import {client, random_name, bucketName} from '@/utils/oss'

const upload = (res)=>{
            return new Promise(function (resolve, reject){
                let obj = {'image/jpeg':'jpeg', 'image/jpg':'jpg', 'image/png':'png', 'image/bmp':'bmp'},
                    imaName = `${random_name()}.${obj[res.raw.type]}`;   // 这里需要注意obj[res.raw.type，这里是动态
                client.putObject({
                    Bucket : bucketName,
                    Key : imaName,
                    Body : res.raw  // localfile为待上传的本地文件路径，需要指定到具体的文件名
                }).then(function(result) {
                    if(result.CommonMsg.Status === 200){
                        // 进入到这里，基本上就已经上传成功。 想得到图片地址就已这样的形式拼接一下`访问地址${imaName}`
                        resolve(`https://myhuaweicloud.com/${imaName}`)
                    }else{
                        reject(result)
                    }
                }).catch((err)=>{
                    reject(err)
                });
            })
        }

如想看更详细代码或想学习vite和vue3.2+请移步： tw-vue-vite: 一个基于vue3.2（全家桶）+ vite + elementplus的系统集成架构 (gitee.com)

tips：以上是正常上传流程，有很多小白以上流程写完后请求出现了跨域等场景，请联系你们华为云管理人员把跨域权限打开就好。
重要的事说3遍：
1.按以上步骤绝不会存在跨域问题，存在找管理者放开权限
2.按以上步骤绝不会存在跨域问题，存在找管理者放开权限
3.按以上步骤绝不会存在跨域问题，存在找管理者放开权限