纯前端实现上传文件（图片，音频，视频，pdf,excel等）到云服务（以obs为例）

纯前端实现上传文件（图片，音频，视频，pdf,excel等）到云服务（以obs为例）

基本流程

在使用obs之前，需要先在华为云官网注册账号，购买obs资源服务，具体流程参考 华为云官方文档。一般情况下这个东西服务器开发人员已经都搞好了，会给前端直接提供好#oss的一些信息,基本就是下方展示的这些参数。

obs.endpoint: obs.xxxx.myhuaweicloud.com
obs.bucketName: your domain name
obs.accessKey: your acckey
obs.secretKey: your seckey
obs.region:xxxx
obs.dirpath: your dir

前端需要登陆华为云账号，配置允许跨域等权限信息（或者让负责服务器的开发人员配置好），然后下载一个obs可视化工具，或者叫控制台，此处以下载安装obs-browser+为例。

打开这个软件，根据上述提供的oss信息登陆进去，就能看到一些存储桶信息了。如下图示。

进入桶内，可以直接在该控制台上传下载本地的文件。也可以通过代码直接上传。我们现在要做的就是第二种方式，实现在前端某个页面中点击一个按钮就可以直接把文件上传到我们指定的存储桶内的某个文件夹下，我们可以在项目中的utils下封装一个工具函数，该函数内配置上对应的oss信息，在需要使用的页面上直接调用该函数即可。
若要实现该功能，需要借助esdk-obs-browserjs这个插件，所以我们需要先安装该插件

npm install esdk-obs-browserjs

然后在封装工具函数的js内导入该插件即可使用。

完整源码：

import ObsClient from "esdk-obs-browserjs/src/obs";
import notification from 'ant-design-vue/es/notification';
export function uploadToOBS(file) {
  let fileExtension = "";
  let temp = file.file.name.split('.');
  fileExtension = temp[temp.length-1];
  if (!fileExtension) return false;
  const obsClient = new ObsClient({ 
    access_key_id: 'xxxx', 
    secret_access_key: 'xxxx', 
    server: 'xxxx' });
  obsClient.putObject({
    Bucket: 'xxxx',
    Key: 'your upload dir' + Date.now()+ "." + fileExtension,
    Body: file,
  }, (err, result) => {
    if (err) {
      console.log("上传失败>>",err);
    } else {
      console.log("上传成功>>",result);
    }
  });
}

在需要使用的页面直接导入就可以直接调用了。上传后，在控制台找到对应目录就能直接看到了。