From 2e6b0b00db12ad5e2dccf2eb066399258b65d5ba Mon Sep 17 00:00:00 2001 From: JimQing Date: Sat, 29 Aug 2020 11:55:16 +0800 Subject: [PATCH] feature: change pic repo --- package.json | 83 ++++++++++--------- src/api/fetch.js | 2 +- src/api/file.js | 34 +++++++- src/assets/scripts/uploadImageFile.js | 26 ++++-- src/components/CodemirrorEditor/header.vue | 4 +- .../CodemirrorEditor/rightClickMenu.vue | 8 +- src/view/CodemirrorEditor.vue | 48 +++++------ 7 files changed, 121 insertions(+), 84 deletions(-) diff --git a/package.json b/package.json index 6a936a0..52e64ba 100644 --- a/package.json +++ b/package.json @@ -1,42 +1,43 @@ { - "name": "vue-md", - "version": "1.3.6", - "private": true, - "homepage": "https://doocs.gitee.io/md", - "scripts": { - "serve": "vue-cli-service serve", - "build": "vue-cli-service build", - "lint": "vue-cli-service lint", - "test:unit": "vue-cli-service test:unit" - }, - "dependencies": { - "axios": "^0.19.1", - "codemirror": "^5.50.2", - "core-js": "^3.4.4", - "element-ui": "^2.13.0", - "jquery": "^3.4.1", - "juice": "^6.0.0", - "markdown": "^0.5.0", - "marked": "^0.8.0", - "prettier": "^2.0.5", - "prettify": "^0.1.7", - "vue": "^2.6.10", - "vue-router": "^3.1.3", - "vuex": "^3.1.2" - }, - "devDependencies": { - "@vue/cli-plugin-babel": "^4.1.0", - "@vue/cli-plugin-eslint": "^4.1.0", - "@vue/cli-plugin-unit-jest": "^4.1.0", - "@vue/cli-service": "^4.1.0", - "@vue/eslint-config-standard": "^4.0.0", - "@vue/test-utils": "1.0.0-beta.29", - "babel-eslint": "^10.0.3", - "eslint": "^5.16.0", - "eslint-plugin-vue": "^5.0.0", - "less-loader": "^6.0.0", - "node-sass": "^4.12.0", - "sass-loader": "^8.0.0", - "vue-template-compiler": "^2.6.10" - } -} \ No newline at end of file + "name": "vue-md", + "version": "1.3.6", + "private": true, + "homepage": "https://doocs.gitee.io/md", + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint", + "test:unit": "vue-cli-service test:unit" + }, + "dependencies": { + "axios": "^0.19.1", + "codemirror": "^5.50.2", + "core-js": "^3.4.4", + "element-ui": "^2.13.0", + "jquery": "^3.4.1", + "juice": "^6.0.0", + "markdown": "^0.5.0", + "marked": "^0.8.0", + "prettier": "^2.0.5", + "prettify": "^0.1.7", + "uuid": "^8.3.0", + "vue": "^2.6.10", + "vue-router": "^3.1.3", + "vuex": "^3.1.2" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^4.1.0", + "@vue/cli-plugin-eslint": "^4.1.0", + "@vue/cli-plugin-unit-jest": "^4.1.0", + "@vue/cli-service": "^4.1.0", + "@vue/eslint-config-standard": "^4.0.0", + "@vue/test-utils": "1.0.0-beta.29", + "babel-eslint": "^10.0.3", + "eslint": "^5.16.0", + "eslint-plugin-vue": "^5.0.0", + "less-loader": "^6.0.0", + "node-sass": "^4.12.0", + "sass-loader": "^8.0.0", + "vue-template-compiler": "^2.6.10" + } +} diff --git a/src/api/fetch.js b/src/api/fetch.js index 5457316..d401d9e 100644 --- a/src/api/fetch.js +++ b/src/api/fetch.js @@ -20,7 +20,7 @@ service.interceptors.request.use( ); service.interceptors.response.use(res => { - return res.data.success ? res.data : Promise.reject(res.data); + return res.data ? res.data : Promise.reject(res); }, error => Promise.reject(error)); export default service; \ No newline at end of file diff --git a/src/api/file.js b/src/api/file.js index f20fad7..460b9d7 100644 --- a/src/api/file.js +++ b/src/api/file.js @@ -1,11 +1,37 @@ import fetch from './fetch'; +import { v4 as uuidv4 } from 'uuid'; +const fileUploadConfig = { + username: 'filess', + repo: 'images', + access_tokens: [ + 'c849e371c79eb9f6d9ebcf28983227bed284d92d', + 'a447236ffceb656eaab4b0fb6367851f8e5e1e93', + '12adcf31e54a8b3710a52de2ac46f3d42f57ce22', + '8187af6fd468bdaa852972be1a864ce6e6a592e7', + '6412beee93f641b709fcfc3d6b6b8b96a0a7a81c', + '6fec856c7462b63a2a2148f7b25fe2c333a42225' + ] +} -function fileUpload(data) { +function fileUpload(content, fileName) { + const date = new Date(); + const dir = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate(); + const uuid = uuidv4(); + const token = fileUploadConfig.access_tokens[Math.round(6 * Math.random())]; + const dateFilename = new Date().getTime() + '-' + uuid + '.' + fileName.split('.')[1]; + const url = `https://api.github.com/repos/${fileUploadConfig.username}/${fileUploadConfig.repo}/contents/${dir}/${dateFilename}?access_token=${token}`; + return fetch({ - url: 'https://imgkr.com/api/files/upload', - method: 'post', - data: data + url, + method: 'put', + headers: { + 'Authorization': 'token ' + token + }, + data: { + message: 'Upload image by https://github.com/doocs/md', + content: content + } }) } diff --git a/src/assets/scripts/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js index c03e767..76016ae 100644 --- a/src/assets/scripts/uploadImageFile.js +++ b/src/assets/scripts/uploadImageFile.js @@ -1,20 +1,30 @@ 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); } else { - let fd = new FormData(); - - fd.append('file', file); - fileApi.fileUpload(fd).then(res => { - resolve(res); - }).catch(err => { - console.log(err.message) - }) + const imgFile = new FileReader(); + imgFile.readAsDataURL(file); + + imgFile.onload = function() { + const base64Cotent = this.result.split(',').pop(); + + fileApi.fileUpload(base64Cotent, file.name).then(res=> { + const imageUrl = res.content.download_url.replace(githubResourceUrl, cdnResourceUrl) + + resolve(imageUrl); + }).catch(err => { + console.log(err.message) + }) + } + } }); } diff --git a/src/components/CodemirrorEditor/header.vue b/src/components/CodemirrorEditor/header.vue index 7b622b5..40688d7 100644 --- a/src/components/CodemirrorEditor/header.vue +++ b/src/components/CodemirrorEditor/header.vue @@ -1,14 +1,14 @@