ant design mysql_【后台管理系统】—— Ant Design Pro组件使用（一）

var qiniu = require('qiniu-js')

import axios from'axios';

import configs from'@/utils/env'import { message } from'antd';//七牛云上传，input， onchange事件

export functionhandleImageUpload(file, type, resName) {//console.log(file,'handleImageUpload')

let suffix = file.type.split('/')[1];return new Promise(function(resolve, reject){if(!file) {

reject('file is undefined')

}functiondataURItoBlob(base64Data) {varbyteString;if(base64Data.split(',')[0].indexOf('base64') >= 0)

byteString= atob(base64Data.split(',')[1]);elsebyteString= unescape(base64Data.split(',')[1]);var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];var ia = newUint8Array(byteString.length);for(var i = 0; i < byteString.length; i++) {

ia[i]=byteString.charCodeAt(i);

}return newBlob([ia], {

type: mimeString

});

}functionrandomString(len) {

len= len || 32;var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';var maxPos =$chars.length;var pwd = '';for (let i = 0; i < len; i++) {

pwd+= $chars.charAt(Math.floor(Math.random() *maxPos));

}returnpwd;

}var reader = newFileReader();

reader.readAsDataURL(file);

reader.οnlοad= function(e) {var fileBlob =dataURItoBlob(e.target.result);varkey;switch(type){case 'audio':

key= 'sys/file/music/' + resName + '.' +suffix;break;case 'video':

key= 'liveWallPaper/' + resName + '.' +suffix;break;case 'tutorial': //教程文件

key = 'sys/tutorial/' + new Date().getTime() + randomString(5) + '.' +suffix;break;case 'tutorialVideo': //针对IOS富文本视频显示问题单独处理教程视频

key = 'yihezo/' + new Date().getTime() +randomString(5) + '.' +suffix;break;default:

key= 'user/h5/' + new Date().getTime() +randomString(5) + '.' +suffix;

}var putExtra ={

fname: file.name,

params: {},

mimeType: ["image/png", "image/jpeg", "image/jpg", "image/gif", "image/webp", "image/apng", "image/svg","audio/mp3", "audio/mp4", "audio/ogg", "audio/mpeg","video/mp4", "video/ogg", "video/webm"]

};var config ={

useCdnDomain:true,

};if(type == 'tutorialVideo' ){ //针对IOS富文本视频显示问题单独处理教程视频

axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token/video', {

key:'yihezo/' + new Date().getTime() +randomString(5) //入参：教程视频的key

}, {

headers: {

AuthorizationToken: localStorage.getItem('login_token')

}

}).then(res=>{

let {data}=res;if(data.code == 200) {

let token=data.data.token;

let observable=qiniu.upload(fileBlob, key, token, putExtra, config)

let subscription=observable.subscribe({next(res){//console.log(res, 'loading')

}, error(res){

message.error('上传失败');

}, complete(res) {

resolve(res.key)

}})//subscription.unsubscribe() // 上传取消

}else{

message.error('获取七牛云token失败');

}

}).catch(error =>{

console.error(error)

reject(error)

})

}else{

axios.post(configs[process.env.API_ENV]['BG_SERVER']+'/file/qiniu/token', {}, {

headers: {

AuthorizationToken: localStorage.getItem('login_token')

}

}).then(res=>{

let {data}=res;if(data.code == 200) {

let token=data.data.token;

let observable=qiniu.upload(fileBlob, key, token, putExtra, config)

let subscription=observable.subscribe({next(res){//console.log(res, 'loading')

}, error(res){

message.error('上传失败');

}, complete(res) {

resolve(res.key)

}})//subscription.unsubscribe() // 上传取消

}else{

message.error('获取七牛云token失败');

}

}).catch(error =>{

console.error(error)

reject(error)

})

}

}

})

}