阿里OSS上传文件案例(前端篇)

Chao 发布于2019-08-02 10:35 / 2275人阅读

摘要：前端调用上传步骤获取一般后台定义所以我们需要请求接口初始化实例调用上传方法得到返回结果第一步封装一个请求接口的函数第二步对的简单封装获取初始化需要的相关信息初始化获取初始化需要的配置配置上传文件存储的路径读取文件文本框读取到的

前端调用上传oss步骤

1、获取accessKeyId,accessKeySecret,stsToken,bucket 一般后台定义(所以我们需要请求接口)
2、初始化oss实例
3、调用上传方法
4、得到返回结果

第一步封装一个请求接口的函数 fetchProxy.js

import "whatwg-fetch"
const cfg = {
    headers: {
      "Content-Type": "application/json",
      "X-AUTH-TOKEN": token,
    },
    method: "POST",
    body: JSON.stringify(body)
}
export default async (url, body, config = {}) => {
  const res = await fetch(url, {...cfg, ...config})
  return res.json()
}

第二步对oss的简单封装 oss.js

import OSS from "ali-oss"
import fetchProxy from "./fetchProxy.js"
let baseUrl = "http://mapi.yimifudao.com"

// 获取oss初始化需要的相关信息
function getOssConfigInfo (url, config) {
  return fetchProxy(`${baseUrl}${url}`, config)
}

// 初始化oss
async function initOSSClient (config) {
  //获取初始化需要的配置
  let res = await getOssConfigInfo("/getFileKey", config)
  if (res.res !== "SUCCESS") return false
  let {bucket, path, accessKeyId, accessKeySecret, stsToken} = res.data
  // ossClient oss配置  path上传文件存储的路径
  return {
    ossClient: new OSS.Wrapper({
      region: "oss-cn-hangzhou",
      accessKeyId,
      accessKeySecret,
      stsToken,
      bucket
    }),
    path
  }
}

// 读取文件
function readFile (option) {
  return new Promise((resolve, reject) => {
    try {
      let file = new FileReader()
      file.addEventListener("load", e => {
        resolve(e.target.result)
      })
      //option.file input file 文本框读取到的文件对象
      file.readAsArrayBuffer(option.file)
    } catch (e) {
      reject()
    }
  })
}

// oss上传文件
//option 上传过程中的回调参数  
//config 获取oss配置信息需要的参数
export default async (option = {}, config) => {
  const fileResult = await readFile(option)
  if (!fileResult) return option.onError ? option.onError("读取文件失败") : "读取文件失败"

  let {ossClient, path} = await initOSSClient(config)
  if (!ossClient) return option.onError ? option.onError("oss初始化错误") : "oss初始化错误"
  //格式化文件名
  let ossObj = `${path}.${option.file.name.split(".").reverse()[0]}`
  try {
    //调用 oss实例put方式上传文件
    const result = await ossClient.put(ossObj, OSS.Buffer(fileResult))
    return option.onSuccess ? option.onSuccess(result) : result
  } catch (e) {
    return option.onError ? option.onError("上传失败") : {res: "FAIL"}
  }
}

// 获取临时访问路径
export async function getSignatureUrl (urlKey, config) {
  let {ossClient} = await initOSSClient(config)
  if (!ossClient) return
  return ossClient.signatureUrl(urlKey)
}

第三步页面调用

     {
    console.log(err)
}
let onSuccess = (res) => {
    console.log(res)
}
let fileUpload = document.getElementById("fileupload")
fileUpload.addeventlistener("onchange", (e) => {
    oss({
        file: e.result.files[0]
        onSuccess,
        onError
    }, {})
})

云服务器 GPU云服务器上传文件至阿里云oss服务器阿里云oss挂载到服务器上传文件 oss文件上传上传oss指定文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52448.html

阿里OSS上传文件案例(前端篇)

摘要：前端调用上传步骤获取一般后台定义所以我们需要请求接口初始化实例调用上传方法得到返回结果第一步封装一个请求接口的函数第二步对的简单封装获取初始化需要的相关信息初始化获取初始化需要的配置配置上传文件存储的路径读取文件文本框读取到的前端调用上传oss步骤 1、获取accessKeyId,accessKeySecret,stsToken,bucket 一般后台定义(所以我们需要请求接口) 2...

why_rookie 2019-08-26 11:57 评论0 收藏0
SpringBoot 整合阿里云OSS 存储服务，快来免费搭建一个自己的图床

摘要：笔主很早就开始用阿里云存储服务当做自己的图床了。阿里云对象存储文档，本篇文章会介绍到整合阿里云存储服务实现文件上传下载以及简单的查看。 Github 地址：https://github.com/Snailclimb/springboot-integration-examples(SpringBoot和其他常用技术的整合,可能是你遇到的讲解最详细的学习案例,力争新手也能看懂并且能够在看完...

邹强 2019-08-16 13:56 评论0 收藏0
【客户案例】智能驾驶行业如何上云？

摘要：产品新功能发布阿里云发布对象存储支持默认加密功能对象存储在客户端和服务器端具备全面的安全加密能力。针对小鹏汽车的一系列需求，阿里云为其打造业界首个定制车载闪电立方深度学习解决方案。【最新动态】表格存储TableStore全新升级，打造统一的在线数据存储平台！表格存储 TableStore 是阿里云面向海量结构化和半结构化数据自研的 Serverless NoSQL 数据库，被广泛用于社...

kaka 2019-04-24 19:42 评论0 收藏0
oss web直传服务器签名 - vue版本

摘要：前言为了减轻服务器压力，采用直传的方式，直接把资源图片，文件，视频等上传到阿里云服务器。这个是需要触发这个回调来通知服务器操作结果。服务器端同事调的，通过接口返回给前端的。这个就是签名，最关键的。的的使用如下结束这样就搞定了。前言：为了减轻服务器压力，采用web直传的方式，直接把资源(图片，文件，视频等)上传到阿里云oss服务器。但是阿里只提供 plupload.js 环境下的 d...

Sunxb 2019-08-23 18:06 评论0 收藏0
使用axios上传文件到阿里云对象文件存储服务器oss

摘要：背景可用于图片音视频日志等海量文件的存储。支持流式写入和文件写入两种方式。这种方式的缺点是，文件要先上传到应用服务器，再上传到，占用带宽资源，过程虽然简单易于操作但是比较繁琐。这里是上面服务端返回的签名对象上传文件名背景 OSS可用于图片、音视频、日志等海量文件的存储。各种终端设备、Web网站程序、移动应用可以直接向OSS写入或读取数据。OSS支持流式写入和文件写入两种方式。使用阿里...

刘玉平 2019-08-02 16:02 评论0 收藏0