diff --git a/package.json b/package.json index 8bb8c45..ba4743f 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "test:unit": "vue-cli-service test:unit" }, "dependencies": { + "ali-oss": "^6.10.0", "axios": "^0.19.1", + "buffer-from": "^1.1.1", "codemirror": "^5.50.2", "core-js": "^3.4.4", "element-ui": "^2.13.0", diff --git a/src/api/file.js b/src/api/file.js index c306ee0..7a3d081 100644 --- a/src/api/file.js +++ b/src/api/file.js @@ -1,32 +1,108 @@ import fetch from './fetch'; -import store from '../store/index'; +import OSS from 'ali-oss'; +import Buffer from 'buffer-from'; import { v4 as uuidv4 } from 'uuid'; -function fileUpload(content, filename) { - const { - method, - token, - url - } = store.getters['imageApi/config']; - const uuid = uuidv4(); - const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1]; - const uploadUrl = url + dateFilename; +const defaultConfig = { + username: 'filess', + repo: 'images', + method: 'put', + accessToken: [ + '7715d7ca67b5d3837cfdoocsmde8c38421815aa423510af', + 'c411415bf95dbe39625doocsmd5047ba9b7a2a6c9642abe', + '2821cd8819fa345c053doocsmdca86ac653f8bc20db1f1b', + '445f0dae46ef1f2a4d6doocsmdc797301e94797b4750a4c', + 'cc1d0c1426d0fd0902bdoocsmdd2d7184b14da61b86ec46', + 'b67e9d15cb6f910492fdoocsmdac6b44d379c953bb19eff', + '618c4dc2244ccbbc088doocsmd125d17fd31b7d06a50cf3', + 'a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55' + ] +} - return fetch({ - url: uploadUrl, - method, +function fileUpload(content, filename) { + const imgHost = localStorage.getItem('imgHost'); + !imgHost && localStorage.setItem('imgHost', 'default'); + switch (imgHost) { + case 'aliOSS': + return aliOSSUploadFile(content, filename); + case 'github': + default: + return githubUploadFile(content, filename); + } +} + +function getDefaultConfig() { + const date = new Date(); + const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0'); + const token = defaultConfig.accessToken[Math.floor(Math.random() * defaultConfig.accessToken.length)].replace('doocsmd', ''); + return { + method: defaultConfig.method, headers: { 'Authorization': 'token ' + token }, - data: { - message: 'Upload image by https://doocs.github.io/md', - content: content - } - }) + url: `https://api.github.com/repos/${defaultConfig.username}/${defaultConfig.repo}/contents/${dir}/` + }; } +function getGitHubConfig() { + const date = new Date(); + const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0'); + const githubConfig = JSON.parse(localStorage.getItem("githubConfig")); + const repoUrl = githubConfig.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/"); + const username = repoUrl[0]; + const repo = repoUrl[1]; + + return { + method: 'put', + headers: { + 'Authorization': 'token ' + githubConfig.accessToken + }, + url: `https://api.github.com/repos/${username}/${repo}/contents/${dir}/` + }; +} + +function githubUploadFile(content, filename) { + const isDefault = localStorage.getItem('imgHost') !== 'github'; + const config = isDefault ? getDefaultConfig() : getGitHubConfig(); + const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1]; + + return fetch({ + url: config.url + dateFilename, + method: config.method, + headers: config.headers, + data: { + message: 'Upload by https://doocs.github.io/md', + content: content + } + }).then(res => { + const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/'; + const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/'; + return isDefault ? res.content.download_url.replace(githubResourceUrl, cdnResourceUrl) : res.content.download_url; + }); + +} + +function aliOSSUploadFile(content, filename) { + const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1]; + const aliOSSConfig = JSON.parse(localStorage.getItem('aliOSSConfig')); + const buffer = Buffer(content, 'base64'); + try { + const dir = aliOSSConfig.path + '/' + dateFilename; + const client = new OSS({ + region: aliOSSConfig.region, + bucket: aliOSSConfig.bucket, + accessKeyId: aliOSSConfig.accessKeyId, + accessKeySecret: aliOSSConfig.accessKeySecret + }); + return client.put(dir, buffer).then(res => { + return res.url; + }) + } catch (e) { + return Promise.reject(e); + } +} export default { fileUpload diff --git a/src/assets/scripts/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js index 51c9d0c..ee0b185 100644 --- a/src/assets/scripts/uploadImageFile.js +++ b/src/assets/scripts/uploadImageFile.js @@ -1,26 +1,22 @@ import fileApi from '../../api/file'; -const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/'; -const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/'; export function uploadImgFile(file) { - return new Promise((resolve, reject) => { const checkImageResult = isImageIllegal(file); if (checkImageResult) { reject(checkImageResult); return; } - const imgFile = new FileReader(); - imgFile.readAsDataURL(file); + const base64Reader = new FileReader(); + base64Reader.readAsDataURL(file); - imgFile.onload = function () { + base64Reader.onload = function () { const base64Content = this.result.split(',').pop(); fileApi.fileUpload(base64Content, file.name).then(res => { - const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl); - resolve(imageUrl); + resolve(res); }).catch(err => { - reject(err.message) + reject(err); }) } }); diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 33c51a3..87c9c2c 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -1,5 +1,5 @@