成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

why_rookie / 3704人閱讀

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

前端調(diào)用上傳oss步驟 
1、獲取accessKeyId,accessKeySecret,stsToken,bucket 一般后臺定義(所以我們需要請求接口)
2、初始化oss實(shí)例
3、調(diào)用上傳方法
4、得到返回結(jié)果
第一步 封裝一個(gè)請求接口的函數(shù) 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初始化需要的相關(guān)信息
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 上傳過程中的回調(diào)參數(shù)  
//config 獲取oss配置信息需要的參數(shù)
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初始化錯(cuò)誤") : "oss初始化錯(cuò)誤"
  //格式化文件名
  let ossObj = `${path}.${option.file.name.split(".").reverse()[0]}`
  try {
    //調(diào)用 oss實(shí)例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"}
  }
}

// 獲取臨時(shí)訪問路徑
export async function getSignatureUrl (urlKey, config) {
  let {ossClient} = await initOSSClient(config)
  if (!ossClient) return
  return ossClient.signatureUrl(urlKey)
}
第三步 頁面調(diào)用 
     {
    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
    }, {})
})

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107892.html

相關(guān)文章

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

    摘要：前端調(diào)用上傳步驟獲取一般后臺定義所以我們需要請求接口初始化實(shí)例調(diào)用上傳方法得到返回結(jié)果第一步封裝一個(gè)請求接口的函數(shù)第二步對的簡單封裝獲取初始化需要的相關(guān)信息初始化獲取初始化需要的配置配置上傳文件存儲的路徑讀取文件文本框讀取到的 前端調(diào)用上傳oss步驟 1、獲取accessKeyId,accessKeySecret,stsToken,bucket 一般后臺定義(所以我們需要請求接口) 2...

    Chao 評論0 收藏0

  • SpringBoot 整合 阿里云OSS 存儲服務(wù)，快來免費(fèi)搭建一個(gè)自己的圖床

    摘要：筆主很早就開始用阿里云存儲服務(wù)當(dāng)做自己的圖床了。阿里云對象存儲文檔，本篇文章會介紹到整合阿里云存儲服務(wù)實(shí)現(xiàn)文件上傳下載以及簡單的查看。 Github 地址：https://github.com/Snailclimb/springboot-integration-examples(SpringBoot和其他常用技術(shù)的整合,可能是你遇到的講解最詳細(xì)的學(xué)習(xí)案例,力爭新手也能看懂并且能夠在看完...

    鄒強(qiáng) 評論0 收藏0

  • 【客戶案例】智能駕駛行業(yè)如何上云？

    摘要：產(chǎn)品新功能發(fā)布阿里云發(fā)布對象存儲支持默認(rèn)加密功能對象存儲在客戶端和服務(wù)器端具備全面的安全加密能力。針對小鵬汽車的一系列需求，阿里云為其打造業(yè)界首個(gè)定制車載閃電立方深度學(xué)習(xí)解決方案?！咀钚聞討B(tài)】 表格存儲TableStore全新升級，打造統(tǒng)一的在線數(shù)據(jù)存儲平臺！ 表格存儲 TableStore 是阿里云面向海量結(jié)構(gòu)化和半結(jié)構(gòu)化數(shù)據(jù)自研的 Serverless NoSQL 數(shù)據(jù)庫，被廣泛用于社...

    kaka 評論0 收藏0

  • oss web直傳 服務(wù)器簽名 - vue版本

    摘要：前言為了減輕服務(wù)器壓力，采用直傳的方式，直接把資源圖片，文件，視頻等上傳到阿里云服務(wù)器。這個(gè)是需要觸發(fā)這個(gè)回調(diào)來通知服務(wù)器操作結(jié)果。服務(wù)器端同事調(diào)的，通過接口返回給前端的。這個(gè)就是簽名，最關(guān)鍵的。的的使用如下結(jié)束這樣就搞定了。 前言： 為了減輕服務(wù)器壓力，采用web直傳的方式，直接把資源(圖片，文件，視頻等)上傳到阿里云oss服務(wù)器。但是阿里只提供 plupload.js 環(huán)境下的 d...

    Sunxb 評論0 收藏0

  • 使用axios上傳文件到阿里云對象文件存儲服務(wù)器oss

    摘要：背景可用于圖片音視頻日志等海量文件的存儲。支持流式寫入和文件寫入兩種方式。這種方式的缺點(diǎn)是，文件要先上傳到應(yīng)用服務(wù)器，再上傳到，占用帶寬資源，過程雖然簡單易于操作但是比較繁瑣。這里是上面服務(wù)端返回的簽名對象上傳文件名 背景 OSS可用于圖片、音視頻、日志等海量文件的存儲。各種終端設(shè)備、Web網(wǎng)站程序、移動應(yīng)用可以直接向OSS寫入或讀取數(shù)據(jù)。OSS支持流式寫入和文件寫入兩種方式。使用阿里...

    劉玉平 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<