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

Chao 發(fā)布于2019-08-02 10:35 / 2503人閱讀

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

前端調(diào)用上傳oss步驟

1、獲取accessKeyId,accessKeySecret,stsToken,bucket 一般后臺(tái)定義(所以我們需要請(qǐng)求接口)
2、初始化oss實(shí)例
3、調(diào)用上傳方法
4、得到返回結(jié)果

第一步封裝一個(gè)請(qǐng)求接口的函數(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()
}

第二步對(duì)oss的簡(jiǎn)單封裝 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上傳文件存儲(chǔ)的路徑
  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 文本框讀取到的文件對(duì)象
      file.readAsArrayBuffer(option.file)
    } catch (e) {
      reject()
    }
  })
}

// oss上傳文件
//option 上傳過(guò)程中的回調(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í)訪問(wèn)路徑
export async function getSignatureUrl (urlKey, config) {
  let {ossClient} = await initOSSClient(config)
  if (!ossClient) return
  return ossClient.signatureUrl(urlKey)
}

第三步頁(yè)面調(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
    }, {})
})

GPU云服務(wù)器云服務(wù)器上傳文件至阿里云oss服務(wù)器阿里云oss掛載到服務(wù)器上傳文件 oss文件上傳上傳oss指定文件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/52448.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Chao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

BREW SDK 中的工具

閱讀 1523·2021-11-22 14:44
2021-11-15

閱讀 2900·2021-11-16 11:44
自動(dòng)化快速上手--Python篇(1)--【變量】--每天半小時(shí)

閱讀 3270·2021-10-13 09:40
Python 小白的 PyQt5 項(xiàng)目實(shí)戰(zhàn)（1）安裝與環(huán)境配置

閱讀 2094·2021-10-08 10:04
數(shù)脈科技：320元/月/E3-1230v2/16GB內(nèi)存/1TB或240GB SSD硬盤(pán)/不限流量/

閱讀 2429·2021-09-24 10:28
杭漂結(jié)束（end）｜我從有贊離職啦｜結(jié)束杭漂

閱讀 2975·2021-09-06 15:02
不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

閱讀 3030·2019-08-30 15:52
[note]布局：列等高，水平垂直居中，固定頁(yè)腳

閱讀 2478·2019-08-30 13:20

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章