ulearning-obs
Version:
obs
336 lines (320 loc) • 13.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>obs</title>
</head>
<body>
<div id="app">
<!-- <select name="" id="mode">
<option value="qiniu">qiniu云</option>
<option value="huawei" selected>华为obs</option>
</select> -->
<button id="uploaderBtn">上传文件</button>
<button @click="initUploader()">initBtn</button>
<button @click="cancelUpload()">取消上传</button>
<button @click="getObjectList()">获取文件列表</button>
<button @click="getObjectInfo()">获取对象信息</button>
<ul class="list">
<li v-for="(item,index) in list" :key="index">
<span>{{item.name}}</span><span> {{item.size}}</span><span>------{{item.percent}}------</span> <b>{{item.key}}</b>
</li>
</ul>
<div >
<h4>base64相关</h4>
<button @click="getImageBase64()">getImgBase64</button>
<button @click="blobUpload()">blob上传图片</button>
</div>
<button @click="download">download</button>
<button @click="getObjectData">getObjectData</button>
</div>
</body>
<!-- <script src="./node_modules/qiniu-js/dist/qiniu.min.js"></script> -->
<!-- <script src="./node_modules/esdk-obs-browserjs/dist/esdk-obs-browserjs-3.21.8-trial-1.js"></script> -->
<!-- <script src="./src/index.js"></script> -->
<script src="./dist/obs-huawei.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var root = new Vue({
el: '#app',
data () {
return {
uploader: '',
list: []
}
},
mounted () {
window.test = this
console.log(this)
let a = {b:[]}
console.log([...a.b])
},
methods:{
initUploader() {
var self = this
this.uploader = new Obs({
// maxSize: 10,
fileTypes: [],
// obsHost: 'http://abc.ulearning.cn/',
multiple: true,
// exts: 'png,jpeg,png',
// obsSign: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdHVkZW50SWQiOiIyMDIyMDIwMUBqZjExNzgiLCJsb2dpbk5hbWUiOiIyMDIyMDIwMUBqZjExNzgiLCJwcm9qZWN0TmFtZSI6InRlYWNoZXItZGV2ZWxvcG1lbnQiLCJleHAiOjE2ODkwODg3MjEsInVzZXJJZCI6NzU3MDE1N30.2LWnAYws3ZKHFXk-p-u7v-w6t9D8mabgN357M1dTcAs',
m3u8: true,
authorization : '0CA90C2AF90017713750A35007B7DC1A'
})
// this.uploader.getObsClient = function (callback) {
// var self = this
// var url = this.uptokenHost + '/obs/uploadToken'
// var xhr = new XMLHttpRequest()
// // 优学院账号用/obs/uploadToken接口，用authorization校验身份， 非优学院账号用/obs/uploadToken/sign，用obsSign校验身份
// if (this.obsSign) {
// url = this.uptokenHost + '/obs/uploadToken/sign'
// }
// xhr.open('get', url, true)
// if (this.obsSign) {
// xhr.setRequestHeader('obsSign', this.obsSign)
// }
// xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// if (xhr.status === 200) {
// var result = JSON.parse(xhr.responseText)
// if (result.code == 1) {
// self.obsClientConfig = result.result
// var obsClient = new ObsClient({
// access_key_id: result.result.ak,
// secret_access_key: result.result.sk,
// server: result.result.endpoint,
// security_token: result.result.securitytoken,
// timeout: 60 * 30,
// });
// self.obsHost = self.obsClientConfig.domain
// callback && callback(obsClient)
// } else {
// self.error('', {
// code: 50080,
// msg: 'token获取失败'
// })
// }
// } else {
// self.error('', {
// code: 50080,
// msg: 'token获取失败'
// })
// }
// }
// }
// xhr.send()
// }
this.uploader.initUpBtn(document.getElementById('uploaderBtn'))
// this.uploader.putObject = function (file) {
// // var self = this
// file.ext = file.ext || file.name.substring(file.name.lastIndexOf('.'))
// // file.key = file.key || 'resources/web/' + Date.now() + Math.round(Math.random() * 10000) + file.ext
// // file.key = 'test/22111.txt'
// this.obsClient.putObject({
// Bucket: self.uploader.obsClientConfig.bucket,
// Key: file.key,
// Metadata: {
// 'ulearning-sign': 'liuzhong0117'
// },
// SourceFile: file,
// ProgressCallback: function (transferredAmount, totalAmount, totalSeconds) {
// var percent = Math.floor(transferredAmount * 100 / totalAmount)
// percent = percent > 99 ? 99 : percent
// file.percent = percent
// console.log(file.percent)
// }
// })
// .then(res => {
// console.log(res)
// // if (res.CommonMsg.Status < 300) { // HTTP状态码小于300，调用成功
// // file.obsHost = self.obsHost
// // if (file.ext.toLowerCase().includes('wma')) {
// // file.originKey = file.key
// // file.key = file.key.substring(0, file.key.lastIndexOf('.')) + '.mp3'
// // self.hwAudioTranscoding(file)
// // }
// // let ext = file.ext.substring(1).toLowerCase()
// // let type = self.getFileType(file.key)
// // if (type == 'video') {
// // if (self.m3u8) {
// // file.m3u8Key = 'resources/web/' + Date.now() + Math.round(Math.random() * 10000) + '.m3u8'
// // }
// // self.hwVideoTranscoding(file)
// // } else if (type == 'audio') {
// // self.getHuaweiMetadata(file.originKey || file.key, function (info){
// // file.duration = info.duration
// // self.success(file)
// // })
// // } else {
// // self.success(file)
// // }
// // }
// })
// .catch(err => {
// self.error(file, {
// code: 50081,
// msg: '华为上传时失败',
// err: err
// })
// })
// }
this.uploader.onBeforeUpload = function (file) {
self.list.push(file)
file.onProgress = function (percent) {
console.log('progress----file-----' + percent)
}
file.onSuccess = function () {
console.log('success----file-----',file)
}
file.onError = function (err) {
console.log('error----file-----' + err)
}
console.log('onBeforeUpload----',file)
}
this.uploader.onError = function (file,err) {
console.log('error',file,err)
}
this.uploader.onSuccess = function (file) {
console.log('success----',file)
}
this.uploader.onProgress = function (file,percent) {
// file.percent = percent
// self.list = self.list
self.$set(self.list, 0, file)
console.log('progress----',file, percent)
}
},
getObjectList () {
let self = this
let obs = new Obs({
uptokenHost: 'https://courseapi.ulearning.cn'
})
obs.getObsClient(function (obsClient) {
obsClient.listObjects({
Bucket: obs.obsClientConfig.bucket,
MaxKeys: 5,
})
})
},
getObjectInfo () {
// resource/obs/1631769510625.wmv
let obs = new Obs({})
obs.getObsClient(function (obsClient) {
obsClient.getObjectMetadata({
Bucket: obs.obsClientConfig.bucket,
Key: 'resources/web/16889587045223346.jpg'
})
.then(res => {
console.log(res)
})
})
},
cancelUpload() {
console.log(this.uploader)
this.uploader.cancelUpload(uploader.files[0])
},
getObjectData () {
let obs = new Obs({
// uptokenHost: 'https://courseapi.ulearning.cn'
})
obs.getObjectData('resources/web/16889587045223346.jpg')
},
download () {
let obs = new Obs({
// uptokenHost: 'https://courseapi.ulearning.cn'
})
// obs.download = function (key, name) {
// key = key.replace(/^(http|https):\/\/[^/]+\//, "");
// obs.getObsClient((obsClient) => {
// obs.obsClient = obsClient
// // 使用GET请求下载对象
// var bucketName = obs.obsClientConfig.bucket;
// var objectKey = key;
// var method = 'GET';
// var res = obsClient.createSignedUrlSync({
// Method : method,
// Bucket : bucketName,
// Key : objectKey,
// QueryParams : {
// 'response-content-disposition' : 'attachment;filename=' + encodeURIComponent(name)
// },
// Expires : 3600,
// });
// console.log(res.SignedUrl)
// const a = document.createElement('a');
// a.style.display = 'none';
// a.href = res.SignedUrl
// // a.download = 'aaa.jpg';
// document.body.appendChild(a);
// a.click();
// })
// }
//https://tobs.ulearning.cn/resources/web/16612370505393351.wav
obs.download('https://leicloud.ulearning.cn/resources/web/16889587045223346.jpg','111.png')
// obs.getDownloadUrl('https://leicloud.ulearning.cn/resources/web/16889587045223346.jpg','111.png', function(url) {
// console.log(url)
// })
// obs.download()
// obs.download('https://obscloud.ulearning.cn/resources/web/16708362968366286.mov', 'bbb.avi')
// obs.download('https://leicloud.ulearning.cn/resources/3993768/202204142043499856.jpg?imageslim|imageMogr2/rotate/270', 'abc.jpg')
},
blobUpload() {
var src = "https://leicloud.ulearning.cn/resource/obs/1631182045470.jpg"
var xhr = new XMLHttpRequest()
xhr.open('get', src)
xhr.responseType = "blob"
xhr.onload = function () {
console.log(xhr)
var blob = xhr.response
var uploader = new Obs({
mode: document.getElementById('mode').value
})
blob.key = "resource/blob/" + Date.now() + '.png'
uploader.startUpload(blob)
}
xhr.send()
},
getQiniuToken(file, callback) {
var url = "https://api.tongshike.cn/qiniu/token?filename=" + encodeURIComponent(file.name)
var xhr = new XMLHttpRequest()
xhr.open('get', url)
xhr.setRequestHeader('AUTHORIZATION', 'A7D7F61648C47B8A461D454FD55986E2')
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
var token = JSON.parse(xhr.responseText).uptoken
callback && callback(token)
}
}
}
xhr.send()
},
getImageBase64 () {
var src = "https://leicloud.ulearning.cn/resource/obs/1631182045470.jpg"
var image = new Image()
image.crossOrigin = '';
image.src = src
image.onload = function () {
console.log(image)
var canvas = document.createElement("canvas");
canvas.width = image.width
canvas.height = image.height
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
var dataURL = canvas.toDataURL();
var uploader = new Obs()
var blob = uploader.dataURLtoBlob(dataURL)
blob.ext = 'png'
uploader.startUpload(blob)
// var base64 = dataURL.substr(dataURL.indexOf(';base64,') + ';base64,'.length)
// console.log(dataURL)
}
}
}
})
</script>
</html>