How to use qiniu-js - 10 common examples
To help you get started, we’ve selected a few qiniu-js examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mdnice / markdown-nice / src / utils / imageHosting.js View on Github 
base64Reader.onload = (e) => {
const urlData = e.target.result;
const base64 = urlData.split(",").pop();
const fileType = urlData
.split(";")
.shift()
.split(":")
.pop();
// base64转blob
const blob = toBlob(base64, fileType);
const conf = {
useCdnDomain: true,
region: qiniu.region[config.region], // 区域
};
const putExtra = {
fname: "",
params: {},
mimeType: [] || null,
};
const OSSName = getOSSName(file.name, namespace);
// 这里第一个参数的形式是blob
const imageObservable = qiniu.upload(blob, OSSName, token, putExtra, conf);
// 上传成功后回调
const complete = (response) => {
// console.log(response);const doUpload = upFile => {
this.notificationsService.info('开始上传', '文件开始上传', { timeOut: 850 });
const keyName = `nodepress/image/${upFile.name.replace(/ /ig, '')}`;
const putExtra = {
params: {},
fname: upFile.name,
mimeType: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']
};
const upOptions = { useCdnDomain: true };
// 开始上传
const observable = qiniu.upload(upFile, keyName, this.upToken, putExtra, upOptions);
this.uploadInProgress = true;
// 监听上传流
const subscription = observable.subscribe({
next: res => {
console.warn('上传有一个新进度', res);
this.uploadInProgress = true;
if (res.total && res.total.percent) {
this.uploadProgress = (res.total.percent || '').toString().slice(0, 5);
}
},
error: err => {
console.warn('上传失败', err);
this.uploadInProgress = false;
this.notificationsService.error('上传失败', err.message, { timeOut: 850 });error(err) {
// console.log('qiniu observer err', err);
return err;
},
complete(res) {
// console.log('qiniu observer complete', res);
const fileUrl = `https://cdn.aermin.top/${res.key}`;
completeEvent(fileUrl);
}
};
const config = { useCdnDomain: true };
const putExtra = {};
const { user_id } = JSON.parse(localStorage.getItem('userInfo'));
const key = `${user_id}_${new Date().getTime()}_${file.name}`;
const observable = qiniu.upload(file, key, uploadToken, putExtra, config);
const subscription = observable.subscribe(observer); // 上传开始
}let files = this.refs.upload.files;
console.log(files);
// 是否是一张照片？
// 七牛
if (!this.imageVerify()) return;
let putExtra = {
fname: '',
params: {},
mimeType: ['image/png','image/jpeg','image/gif']
};
let config = {
region: qiniu.region.z0
};
let key = new Date().getTime() + files[0].name;
let observable = qiniu.upload(files[0], key, token, putExtra, config)
let observer = {
compelete: (res) => {
let imgUrl = baseUrl + '/' + res.key;
console.log(imgUrl);
this.props.successCb(imgUrl);
},
error: (err) => {
notification.error({
message: err
})
}
}
let subscrtion = observable.subscribe(observer);
}uploadFn = async () => {
let response = await API.getToken();
let { baseUrl, token } = response.data;
let files = this.refs.upload.files;
console.log(files);
// 是否是一张照片？
// 七牛
if (!this.imageVerify()) return;
let putExtra = {
fname: '',
params: {},
mimeType: ['image/png','image/jpeg','image/gif']
};
let config = {
region: qiniu.region.z0
};
let key = new Date().getTime() + files[0].name;
let observable = qiniu.upload(files[0], key, token, putExtra, config)
let observer = {
compelete: (res) => {
let imgUrl = baseUrl + '/' + res.key;
console.log(imgUrl);
this.props.successCb(imgUrl);
},
error: (err) => {
notification.error({
message: err
})
}
}uploadFile = file;
}
const newFileName = `image/${imageTwo ? imageTwo : 'common'}/${font}_${lastModified}_${size}_${+new Date()}${back}`;
const config = {
useCdnDomain: true,
region: null
};
const putExtra = {
fname: '',
params: {},
mimeType: [] || null
};
// return ;
const observable = qiniu.upload(uploadFile, newFileName, qiniuToken, putExtra, config);
const subscription = observable.subscribe(observer); // 上传开始
let qiniu_upload_link = bucket_domin[bucket] + newFileName;
this.setState({
markdownUploadLink: [...markdownUploadLink, qiniu_upload_link]
});
return true;
}// fileUploadQiniu(fileData);
// debugger;
// 使用 axios 进行文件上传的请求
// axios.put(action, fileData, {
// withCredentials,
// headers,
// onUploadProgress: ({ total, loaded }) => {
// // 进行上传进度输出，更加直观
// onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
// },
// }).then(response => {
// onSuccess(response, file);
// })
// .catch(onError);
let key = uuid.v4(); // TODO 芋艿，可能后面要优化。MD5？
let observable = qiniu.upload(file, key, this.state.token); // TODO 芋艿，最后后面去掉 qiniu 的库依赖，直接 http 请求，这样更轻量
observable.subscribe(function () {
// next
}, function () {
// error
// TODO 芋艿，后续补充
debugger;
}, function (response) {
debugger;
// complete
// debugger;
response.url = 'http://static.shop.iocoder.cn/' + response.key; // 需要设置，用于后续 onSuccess ，合并到 file 中，从而设置到 fileList
onSuccess(response, file);
});
};
return {if (!this.imageVerify) return
var putExtra = {
fname: "",
params: {},
mimeType: ["image/png", "image/jpeg", "image/gif"]
};
var config = {
region: qiniu.region.z0
};
// 文件名
let key = new Date().getTime() + files[0].name;
var observable = qiniu.upload(files[0], key, token, putExtra, config)
var observer = {
next: (res) => {
// ...
},
error: (err) => {
notification.error({
message: err
})
},
complete: (res) => {
let imgUrl = baseUrl + '/' + res.key
this.props.successCb(imgUrl)
}
}let response = await API.getToken()
let {baseUrl, token} = response.data
let files = this.refs.upload.files
// 校验图片
if (!this.imageVerify) return
var putExtra = {
fname: "",
params: {},
mimeType: ["image/png", "image/jpeg", "image/gif"]
};
var config = {
region: qiniu.region.z0
};
// 文件名
let key = new Date().getTime() + files[0].name;
var observable = qiniu.upload(files[0], key, token, putExtra, config)
var observer = {
next: (res) => {
// ...
},
error: (err) => {
notification.error({
message: err
})
},
complete: (res) => {uplaodAction2 (res, file, key) {
const _this = this
const observable = qiniu.upload(file, key, this.token, {
fname: key,
mimeType: []
}, {
useCdnDomain: true,
region: qiniu.region.z2
})
observable.subscribe({
next (res) {
_this.$set(_this.fileList[_this.fileList.findIndex(item => item.key === key)], 'percent', parseInt(res.total.percent))
},
error (err) {
_this.$set(_this.fileList, _this.fileList.findIndex(item => item.key === key), {
..._this.fileList[_this.fileList.findIndex(item => item.key === key)],
status: 'error'
})
