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

Chao 發布于2019-08-02 10:35 / 2346人閱讀

摘要：前端調用上傳步驟獲取一般后臺定義所以我們需要請求接口初始化實例調用上傳方法得到返回結果第一步封裝一個請求接口的函數第二步對的簡單封裝獲取初始化需要的相關信息初始化獲取初始化需要的配置配置上傳文件存儲的路徑讀取文件文本框讀取到的

前端調用上傳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指定文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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
【客戶案例】智能駕駛行業如何上云？

摘要：產品新功能發布阿里云發布對象存儲支持默認加密功能對象存儲在客戶端和服務器端具備全面的安全加密能力。針對小鵬汽車的一系列需求，阿里云為其打造業界首個定制車載閃電立方深度學習解決方案?！咀钚聞討B】表格存儲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