From 2abf62cec92018b036e85884aa1af35af1e5288a Mon Sep 17 00:00:00 2001 From: JimQing Date: Sat, 12 Sep 2020 16:53:52 +0800 Subject: [PATCH 1/4] feat: update upload method --- package.json | 2 + src/api/file.js | 58 +++++++++++++++++++--- src/assets/scripts/uploadImageFile.js | 12 ++--- src/store/imageApi.js | 69 ++++++++++++++++----------- 4 files changed, 99 insertions(+), 42 deletions(-) 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..067f451 100644 --- a/src/api/file.js +++ b/src/api/file.js @@ -5,28 +5,72 @@ import { } from 'uuid'; function fileUpload(content, filename) { + const fileUploadType = store.state.imgHost; + const activeKey = fileUploadType !== 'default' && localStorage.getItem(`${fileUploadType}Config`) + ? fileUploadType : 'default'; + + switch (activeKey) { + case 'aliOSS': + return aliOSSUploadFile(content, filename); + case 'default': + return githubUploadFile(content, filename); + case 'github': + return githubUploadFile(content, filename); + default: + break; + } +} + +/** + * github 图片上传 + * @param {*} content + * @param {*} filename + */ +function githubUploadFile(content, filename) { + const githubResourceUrl = 'raw.githubusercontent.com/filess/images/master/'; + const cdnResourceUrl = 'cdn.jsdelivr.net/gh/filess/images/'; const { method, - token, + headers, url } = store.getters['imageApi/config']; - const uuid = uuidv4(); - const dateFilename = new Date().getTime() + '-' + uuid + '.' + filename.split('.')[1]; + const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1]; const uploadUrl = url + dateFilename; return fetch({ url: uploadUrl, method, - headers: { - 'Authorization': 'token ' + token - }, + headers, data: { message: 'Upload image by https://doocs.github.io/md', content: content } - }) + }).then(res=> { + const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl); + + return imageUrl; + }); } +function aliOSSUploadFile(content, filename) { + debugger; + const config = store.getters['imageApi/config']; + const dateFilename = new Date().getTime() + '-' + uuidv4() + '.' + filename.split('.')[1]; + const dir = config.dir + '/' + dateFilename; + const Buffer = require('buffer-from') + const buffer = Buffer(content, 'base64'); + const OSS = require('ali-oss'); + try { + const client = new OSS(config); + + return client.put(dir, buffer).then(res=> { + console.log('aliOSSUoladFile', 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..2b50c8b 100644 --- a/src/assets/scripts/uploadImageFile.js +++ b/src/assets/scripts/uploadImageFile.js @@ -1,24 +1,20 @@ 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) }) diff --git a/src/store/imageApi.js b/src/store/imageApi.js index 1f92fdb..78afe66 100644 --- a/src/store/imageApi.js +++ b/src/store/imageApi.js @@ -15,39 +15,54 @@ const state = { 'a4b581732e1c1507458doocsmdc5b223b27dae5e2e16a55' ] }, + aliOSS: { + bucket: '', + // region以杭州为例（oss-cn-hangzhou），其他region按实际情况填写。 + region: '', + // 阿里云主账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM账号进行API访问或日常运维，请登录RAM控制台创建RAM账号。 + accessKeyId: '', + accessKeySecret: '', + }, qiniuCloud: {} }; const getters = { config(state) { - let token, username, repo, method; - const activeKey = state.imgHost !== 'default' && localStorage.getItem(`${state.imgHost}Config`) ? state.imgHost : 'default'; - - switch (activeKey) { - case 'github': - const githubConfg = JSON.parse(localStorage.getItem("githubConfig")); - const repoUrl = githubConfg.repo.replace("https://github.com/", "").replace("http://github.com/", "").replace("github.com/", "").split("/"); - token = githubConfg.accessToken; - username = repoUrl[0]; - repo = repoUrl[1]; - method = 'put'; - break; - case 'qiniuCloud': - break; - default: - token = state.default.accessToken[Math.floor(Math.random() * state.default.accessToken.length)].replace('doocsmd', ''); - username = state.default.username; - repo = state.default.repo; - method = state.default.method; - break; - } const date = new Date(); const dir = date.getFullYear() + '/' + (date.getMonth() + 1).toString().padStart(2, '0') + '/' + date.getDate().toString().padStart(2, '0'); - const url = `https://api.github.com/repos/${username}/${repo}/contents/${dir}/`; - - return { - method, - token, - url + const activeKey = state.imgHost !== 'default' && localStorage.getItem(`${state.imgHost}Config`) ? state.imgHost : 'default'; + + switch (activeKey) { + case 'aliOSS': + return { + ...state.aliOSS, + dir + }; + case 'qiniuCloud': + return { + }; + case 'github': + 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}/` + }; + default: + const token = state.default.accessToken[Math.floor(Math.random() * state.default.accessToken.length)].replace('doocsmd', ''); + + return { + method: state.default.method, + headers: { + 'Authorization': 'token ' + token + }, + url: `https://api.github.com/repos/${state.default.username}/${state.default.repo}/contents/${dir}/` + }; } } }; From a17f6368e01691bb2441092ec03dda0cc652fb6a Mon Sep 17 00:00:00 2001 From: yanglbme Date: Sun, 13 Sep 2020 16:09:31 +0800 Subject: [PATCH 2/4] feat: update uploadImgDialog component --- src/components/CodemirrorEditor/uploadImgDialog.vue | 6 +++--- src/view/CodemirrorEditor.vue | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue index 33c51a3..db691cd 100644 --- a/src/components/CodemirrorEditor/uploadImgDialog.vue +++ b/src/components/CodemirrorEditor/uploadImgDialog.vue @@ -1,5 +1,5 @@