关于华为云,网上要找的资料很少很少.另外要吐槽一下华为云的文档,前篇找不到一点关于vue的技术文档.后来还打了官网技术的电话咨询.人家来了一句居然不支持vue的使用/顿时一脸懵逼,那怎么办,项目又必须用华为云的obs上传.
好吧.算了自己来研究研究吧.居然支持BrowserJS的使用那么肯定可以在vue中使用起来.demo代码撸起来
首先要下载sdk包.其实就是一个js文件引入
下载SDK BrowserJS
1 官网下载BrowserJS
2 esdk-obs-browserjs 3.20.7
3 重要的一点BrowserJS 一个是含without-polyfil 另外一个是不含without-polyfil
4 在项目中如果你有单独引入babel-polyfill的话,那你就用含without-polyfil的js文件、如果你没有就引入不含without-polyfil的js文件,这一点很重要,要不然你项目会冲突
下面是我写的一个demo,比较简单.搭建凑合着看吧
这个是一个请求封装的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");//因为我的项目里有装过babel-polyfill所以选择用来这个带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}`);// 这个就是最终生成的访问路径
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: "上传失败，请重新上传"
})
});
// });
}
在项目中只需要调用一下就OK了.so easy
obsUpload(item,this.preview)
// item就是你上传的flie文件
//this.preview就是一个你保存的数组 可以预览回显用
<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;
}
// 过滤重复文件
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;
}
// 加载预览图
this.preview.length = 0;
this.images.forEach(item=>{
obsUpload(item,this.preview)
this.imageSync();//触发到父组件操作逻辑
})
},
好了.这个坑踩了一下下午才搞出来.希望可以帮到那些项目必须用到华为云obs上传到同学、、、、
最后提示:能不能就不用.真的挺麻烦的,七牛/阿里文档又简单,一看就会.那些文档简单一撸就会的第三方上传不香吗???慎用
