前端挪用上傳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)
}
第三步 頁面挪用
<input type='file' id='fileupload/>
import oss, {getSignatureUrl} from './oss.js'
let onError = (err) => {
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
}, {})
})