關(guān)于華為云,網(wǎng)上要找的資料很少很少.另外要吐槽一下華為云的文檔,前篇找不到一點(diǎn)關(guān)于vue的技術(shù)文檔.后來還打了官網(wǎng)技術(shù)的電話咨詢.人家來了一句居然不支持vue的使用/頓時(shí)一臉懵逼,那怎么辦,項(xiàng)目又必須用華為云的obs上傳.
? ? 好吧.算了自己來研究研究吧.居然支持BrowserJS的使用那么肯定可以在vue中使用起來.demo代碼擼起來
首先要下載sdk包.其實(shí)就是一個(gè)js文件引入
下載SDK?BrowserJS? ?
1 官網(wǎng)下載BrowserJS?
2 esdk-obs-browserjs? 3.20.7?
3 重要的一點(diǎn)BrowserJS 一個(gè)是含without-polyfil 另外一個(gè)是不含without-polyfil
4 在項(xiàng)目中如果你有單獨(dú)引入babel-polyfill的話,那你就用含without-polyfil的js文件、如果你沒有就引入不含without-polyfil的js文件,這一點(diǎn)很重要,要不然你項(xiàng)目會(huì)沖突
下面是我寫的一個(gè)demo,比較簡(jiǎn)單.搭建湊合著看吧
這個(gè)是一個(gè)請(qǐng)求封裝的uploadImg.js
import Vue from 'vue';
import { ToastPlugin } from 'vux'
Vue.use(ToastPlugin)
let vm = new Vue()
import { getObsConfigApi} from '@/api/common/getObsConfig.js'
require("./esdk-obs-browserjs-without-polyfill-3.19.5.min.js");//因?yàn)槲业捻?xiàng)目里有裝過babel-polyfill所以選擇用來這個(gè)帶without-polyfill***.js
function generateUUID() {
? var d = new Date().getTime();
? if (window.performance && typeof window.performance.now === "function") {
? ? d += performance.now(); //use high-precision timer if available
? }
? var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
? ? /[xy]/g,
? ? function (c) {
? ? ? var r = (d + Math.random() * 16) % 16 | 0;
? ? ? d = Math.floor(d / 16);
? ? ? return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
? ? }
? );
? return uuid;
}
function getObsClient(accessKey, secretKey, endPoint) {
? // eslint-disable-next-line no-undef
? var obsClient = new ObsClient({
? ? access_key_id: accessKey,
? ? secret_access_key: secretKey,
? ? server: endPoint,
? ? timeout: 60 * 5,
? });
? return obsClient;
}
export async function obsUpload(file,preview) {
? // return new Promise(async resolve => {
? // console.log('接收===')
? // console.log(file)
? let fileObj = file;
? // let fileContent = file.url;
? const {data} = await getObsConfigApi();
? const { accessKey,bucketName,endPoint, secretKey } = data;
? const objectKey = generateUUID(); // 文件的uuid
? getObsClient(accessKey, secretKey, endPoint)
? ? .putObject({
? ? ? Bucket: bucketName,
? ? ? Key: objectKey,
? ? ? Metadata: {
? ? ? ? property: "property-value"
? ? ? },
? ? ? SourceFile: fileObj,
? ? })
? ? .then(function (result) {
? ? ? // console.log(result);
? ? ? console.log(`https://${bucketName}.${endPoint}/${objectKey}`);// 這個(gè)就是最終生成的訪問路徑
? ? ? vm.$vux.toast.show({
? ? ? ? ? type: 'text',
? ? ? ? ? position: 'middle',
? ? ? ? ? text: "上傳成功"
? ? ? })
? ? ? preview.unshift({src:`https://${bucketName}.${endPoint}/${objectKey}`})
? ? })
? ? .catch(function (err) {
? ? ? console.error(err);
? ? ? vm.$vux.toast.show({
? ? ? ? type: 'text',
? ? ? ? position: 'middle',
? ? ? ? text: "上傳失敗，請(qǐng)重新上傳"
? ? ? })
? ? });
? // });
}
在項(xiàng)目中只需要調(diào)用一下就OK了.so easy
obsUpload(item,this.preview)
//?item就是你上傳的flie文件
//this.preview就是一個(gè)你保存的數(shù)組 可以預(yù)覽回顯用
<input id="fileUpload" name="file" type="file" :multiple="multiple" @change="imageLoad">
imageLoad (e) {
? ? ? ? ? ? let images = {};
? ? ? ? ? ? // 過濾非圖片
? ? ? ? ? ? for (let v of e.target.files) {
? ? ? ? ? ? ? ? if (v.type.search('image') !== -1) {
? ? ? ? ? ? ? ? ? ? images[v.name] = v;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 加載已有圖片
? ? ? ? ? ? for (let v of this.images) {
? ? ? ? ? ? ? ? images[v.name] = v;
? ? ? ? ? ? }
? ? ? ? ? ? // 過濾重復(fù)文件
? ? ? ? ? ? this.images = [...new Set(Object.keys(images))].reduce((a, b) => {
? ? ? ? ? ? ? ? a.push(images[b]);
? ? ? ? ? ? ? ? return a;
? ? ? ? ? ? }, []);
? ? ? ? ? ? // limit
? ? ? ? ? ? if (this.images.length > this.limit) {
? ? ? ? ? ? ? ? this.images.length = this.limit;
? ? ? ? ? ? }
? ? ? ? ? ? // 加載預(yù)覽圖
? ? ? ? ? ? this.preview.length = 0;
? ? ? ? ? ? this.images.forEach(item=>{
? ? ? ? ? ? ? ? obsUpload(item,this.preview)
? ? ? ? ? ? ? ? this.imageSync();//觸發(fā)到父組件操作邏輯
? ? ? ? ? ? })
? ? ? ? },
好了.這個(gè)坑踩了一下下午才搞出來.希望可以幫到那些項(xiàng)目必須用到華為云obs上傳到同學(xué)、、、、
最后提示:能不能就不用.真的挺麻煩的,七牛/阿里文檔又簡(jiǎn)單,一看就會(huì).那些文檔簡(jiǎn)單一擼就會(huì)的第三方上傳不香嗎???慎用
