3 |
4 |
11 |
12 |
13 |
36 |
37 |
38 |
79 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
5 |
10 |
3 |
4 |
5 |
7 |
15 |
16 |
17 |
19 |
20 |
22 |
23 |
25 |
26 |
27 |
29 |
30 |
31 |
32 |
68 |
79 |
--------------------------------------------------------------------------------
/src/components/PostDetail.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
23 |
24 |
25 |
55 |
85 |
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import Init from '@/pages/Init'
4 | import Home from '@/pages/Home'
5 | import Config from '@/components/Config'
6 | import RegistForm from '@/components/RegistForm'
7 | import RegistUserInfoForm from '@/components/RegistUserInfoForm'
8 | import ImageFinder from '@/components/ImageFinder'
9 | import Upload from '@/components/Upload'
10 | import Chatroom from '@/components/Chatroom'
11 | import NewPost from '@/components/PostForm'
12 | import PostDetail from '@/components/PostDetail'
13 | import ImageList from '@/components/ImageList'
14 | import Me from '@/components/Me'
15 | import Settings from '@/components/Settings'
16 | import Util from '../utils/common'
17 |
18 | Vue.use(Router)
19 |
20 | export default new Router({
21 | routes: [{
22 | path: '/',
23 | name: 'Init',
24 | component: Init,
25 | children: [{
26 | name: 'Config',
27 | path: 'config',
28 | component: Config,
29 | }, {
30 | name: 'RegistForm',
31 | path: 'regist',
32 | component: RegistForm
33 | }, {
34 | name: 'RegistUserInfoForm',
35 | path: 'regist/confirm',
36 | component: RegistUserInfoForm
37 | }]
38 | }, {
39 | path: '/home',
40 | name: 'Home',
41 | component: Home,
42 | redirect: {
43 | name: 'Upload'
44 | },
45 | children: [{
46 | name: 'ImageFinder',
47 | path: 'imageFinder',
48 | component: ImageFinder
49 | },{
50 | name: 'Upload',
51 | path: 'upload',
52 | component: Upload
53 | }, {
54 | name: 'Chatroom',
55 | path: 'chatroom',
56 | component: Chatroom
57 | }, {
58 | name: 'NewPost',
59 | path: 'newpost',
60 | component: NewPost
61 | }, {
62 | name: 'PostDetail',
63 | path: 'postDetail/:id',
64 | component: PostDetail
65 | }, {
66 | name: 'ImageList',
67 | path: 'imageList',
68 | component: ImageList
69 | }, {
70 | name: 'Me',
71 | path: 'me',
72 | component: Me
73 | }, {
74 | name: 'Settings',
75 | path: 'settings',
76 | component: Settings
77 | }]
78 | }, {
79 | path: '*',
80 | name: 'root',
81 | redirect: {
82 | name: 'Upload'
83 | }
84 | }]
85 | })
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Niu-Niu-Image-Bed",
3 | "version": "1.0.0",
4 | "description": "Free bed, bed outside the chain, image upload, CDN acceleration",
5 | "author": "alex1504
5 | ![]()
6 |
7 |
8 | Author:
9 | alex
10 | Published At:
11 | {{post.createdAt | timeFormat}}
12 |
13 |
16 |
17 |
19 | Minim proident velit veniam in ullamco excepteur eiusmod anim aliqua ut.
18 |
20 | Irure magna irure fugiat aliqua officia incididunt in aliqua amet incididunt laborum. Excepteur ut adipisicing non officia deserunt sint deserunt quis est. Fugiat ex velit magna laboris nisi. Mollit duis aute veniam laborum. Sint eiusmod ullamco ipsum enim ex voluptate dolor ullamco ipsum veniam. Minim exercitation non enim nisi occaecat laborum aliqua fugiat Lorem laboris elit.
21 |
22 |
3 |
21 |
22 |
23 |
63 |
64 |
103 |
--------------------------------------------------------------------------------
/server/api/utils/conf.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const os = require('os');
4 | const pkg = require('../../package.json');
5 |
6 | exports.ACCESS_KEY = 'ZpcVLm3mhM_jvHaZQEbSRc9lad2t8FlN1eZKCWk6';
7 | exports.SECRET_KEY = '9XWvOR9wLeoIRugYVu7xsHW1Z9k2NVw054AtuSDK';
8 |
9 | var defaultUserAgent = function() {
10 | return 'QiniuNodejs/' + pkg.version + ' (' + os.type() + '; ' + os.platform() +
11 | '; ' + os.arch() + '; )';
12 | }
13 |
14 | exports.USER_AGENT = defaultUserAgent();
15 | exports.BLOCK_SIZE = 4 * 1024 * 1024; //4MB, never change
16 |
17 | //define api form mime type
18 | exports.FormMimeUrl = "application/x-www-form-urlencoded";
19 | exports.FormMimeJson = "application/json";
20 | exports.FormMimeRaw = "application/octet-stream";
21 | exports.RS_HOST = "http://rs.qiniu.com";
22 | exports.RPC_TIMEOUT = 120000; //120s
23 |
24 | //proxy
25 | exports.RPC_HTTP_AGENT = null;
26 | exports.RPC_HTTPS_AGENT = null;
27 |
28 | exports.Config = function Config(options) {
29 | options = options || {};
30 | //use http or https protocol
31 | this.useHttpsDomain = options.useHttpsDomain || false;
32 | //use cdn accerlated domains
33 | this.useCdnDomain = options.useCdnDomain || true;
34 | //zone of the bucket
35 | //z0 huadong, z1 huabei, z2 huanan, na0 beimei
36 | this.zone = options.zone || null;
37 | this.zoneExpire = options.zoneExpire || -1;
38 | }
39 |
40 | exports.Zone = function(srcUpHosts, cdnUpHosts, ioHost, rsHost, rsfHost,
41 | apiHost) {
42 | this.srcUpHosts = srcUpHosts || {};
43 | this.cdnUpHosts = cdnUpHosts || {};
44 | this.ioHost = ioHost || "";
45 | this.rsHost = rsHost || "rs.qiniu.com";
46 | this.rsfHost = rsfHost || "rsf.qiniu.com";
47 | this.apiHost = apiHost || "api.qiniu.com";
48 | var dotIndex = this.ioHost.indexOf(".");
49 | if (dotIndex != -1) {
50 | var ioTag = this.ioHost.substring(0, dotIndex);
51 | var zoneSepIndex = ioTag.indexOf("-");
52 | if (zoneSepIndex != -1) {
53 | var zoneTag = ioTag.substring(zoneSepIndex + 1);
54 | switch (zoneTag) {
55 | case "z1":
56 | this.rsHost = "rs-z1.qiniu.com";
57 | this.rsfHost = "rsf-z1.qiniu.com";
58 | this.apiHost = "api-z1.qiniu.com";
59 | break;
60 | case "z2":
61 | this.rsHost = "rs-z2.qiniu.com";
62 | this.rsfHost = "rsf-z2.qiniu.com";
63 | this.apiHost = "api-z2.qiniu.com";
64 | break;
65 | case "na0":
66 | this.rsHost = "rs-na0.qiniu.com";
67 | this.rsfHost = "rsf-na0.qiniu.com";
68 | this.apiHost = "api-na0.qiniu.com";
69 | break;
70 | default:
71 | this.rsHost = "rs.qiniu.com";
72 | this.rsfHost = "rsf.qiniu.com";
73 | this.apiHost = "api.qiniu.com";
74 | break;
75 | }
76 | }
77 | }
78 | }
--------------------------------------------------------------------------------
/src/components/Sidebar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
19 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
14 |
18 |
4 |
16 |
17 |
18 |
19 |
20 |
71 |
72 |
105 |
--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
1 | // see http://vuejs-templates.github.io/webpack for documentation.
2 | var path = require('path')
3 |
4 | module.exports = {
5 | module: {
6 | // module.rules is the same as module.loaders in 1.x
7 | rules: [{
8 | test: /\.vue$/,
9 | loader: 'vue-loader',
10 | // vue-loader options goes here
11 | options: {
12 | loaders: {
13 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
14 | // the "scss" and "sass" values for the lang attribute to the right configs here.
15 | // other preprocessors should work out of the box, no loader config like this nessessary.
16 | 'scss': 'vue-style-loader!css-loader!sass-loader',
17 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
18 | }
19 | // other vue-loader options go here
20 | }
21 | }, {
22 | test: /\.scss$/,
23 | loader: 'style!css!sass',
24 | }, {
25 | test: /\.js$/,
26 | loader: 'babel-loader',
27 | exclude: /node_modules/
28 | }, {
29 | test: /\.(png|jpg|gif|svg)$/,
30 | loader: 'file-loader',
31 | options: {
32 | name: '[name].[ext]?[hash]'
33 | }
34 | }]
35 | },
36 | build: {
37 | env: require('./prod.env'),
38 | index: path.resolve(__dirname, '../dist/index.html'),
39 | assetsRoot: path.resolve(__dirname, '../dist'),
40 | assetsSubDirectory: 'static',
41 | assetsPublicPath: '/',
42 | productionSourceMap: true,
43 | // Gzip off by default as many popular static hosts such as
44 | // Surge or Netlify already gzip all static assets for you.
45 | // Before setting to `true`, make sure to:
46 | // npm install --save-dev compression-webpack-plugin
47 | productionGzip: false,
48 | productionGzipExtensions: ['js', 'css'],
49 | // Run the build command with an extra argument to
50 | // View the bundle analyzer report after build finishes:
51 | // `npm run build --report`
52 | // Set to `true` or `false` to always turn it on or off
53 | bundleAnalyzerReport: process.env.npm_config_report
54 | },
55 | dev: {
56 | env: require('./dev.env'),
57 | port: 8080,
58 | autoOpenBrowser: true,
59 | assetsSubDirectory: 'static',
60 | assetsPublicPath: '/',
61 | // 本地开发环境接口代理，将localhost:8080/api 映射到 localhost:3000
62 | proxyTable: {
63 | '/api': {
64 | target: 'http://localhost:3000',
65 | changeOrigin: true,
66 | pathRewrite: {
67 | '^/api': ''
68 | }
69 | }
70 | },
71 | // CSS Sourcemaps off by default because relative paths are "buggy"
72 | // with this option, according to the CSS-Loader README
73 | // (https://github.com/webpack/css-loader#sourcemaps)
74 | // In our experience, they generally work as expected,
75 | // just be aware of this issue when enabling this option.
76 | cssSourceMap: false
77 | }
78 |
79 | }
80 |
--------------------------------------------------------------------------------
/src/components/Config.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
8 |
9 |
54 |
55 |
56 |
105 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import storage from '../utils/storage'
4 | import Util from '../utils/common'
5 | Vue.use(Vuex);
6 |
7 | const store = new Vuex.Store({
8 | state: {
9 | // 当前路由名称
10 | activeRoute: 'ImageFinder',
11 | // Emoji折叠展开状态
12 | isEmoji: false,
13 | // snackbar 状态
14 | snackbar: false,
15 | // snackbar文字
16 | snackMsg: '',
17 | // 注册用户名
18 | registUsername: '',
19 | // 注册密码
20 | registPassword: '',
21 | // 当前用户
22 | username: storage.get('loginInfo') && storage.get('loginInfo').username || '',
23 | // token
24 | token: storage.get('token') || '',
25 | // post封面
26 | poster: '',
27 | // 浮层是否显示
28 | isImagePop: false,
29 | // 浮层预览主体图片路径
30 | imgview: '',
31 | // 加载spiner显示
32 | isSpiner: false,
33 | // 七牛图片list数量是否变化
34 | isPicListChange: true,
35 | // 七牛API授权
36 | qiniuAuth: Util.getQiniuAuth(),
37 | // 上传文件名前缀
38 | uploadOptions: storage.get("uploadOptions") || null
39 |
40 | },
41 | getters: {
42 | // 当前所属菜单
43 | activeMenu(state) {
44 | var mapIndex = {
45 | "ImageFinder": '1',
46 | "Upload": '2',
47 | "ImageList": '3',
48 | "Settings": '4',
49 | 'Chatroom': '5',
50 | 'NewPost': '6',
51 | "Me": '7',
52 | }
53 | return mapIndex[state.activeRoute]
54 | }
55 | },
56 | mutations: {
57 | ACTIVE_ROUTE_CHANGE: function(state, payload) {
58 | state.activeRoute = payload.activeRoute
59 | },
60 | EMOJI_SHOW_CHANGE: function(state, payload) {
61 | state.isEmoji = payload.isEmoji
62 | },
63 | SNACK_BAR_CHANGE: function(state, payload) {
64 | state.snackbar = payload.snackbar;
65 | state.snackMsg = payload.snackMsg;
66 | },
67 | REGIST_USER_INFO_CHANGE: function(state, payload) {
68 | state.registUsername = payload.registUsername;
69 | state.registPassword = payload.registPassword;
70 | },
71 | USERNAME_CHANGE: function(state, payload) {
72 | state.username = payload.username;
73 | },
74 | TOKEN_CHANGE: function(state, payload) {
75 | state.token = payload.token;
76 | },
77 | POSTER_CHANGE: function(state, payload) {
78 | state.poster = payload.poster;
79 | },
80 | IMAGE_POP_CHANGE: function(state, payload) {
81 | state.isImagePop = payload.isImagePop;
82 | state.imgview = payload.imgview
83 | },
84 | SPINER_CHANGE: function(state, payload) {
85 | state.isSpiner = payload.isSpiner;
86 | },
87 | PICLIST_CHANGE: function(state, payload) {
88 | state.isPicListChange = payload.isPicListChange;
89 | },
90 | QINIU_AUTH_CHANGE: function(state, payload) {
91 | state.qiniuAuth = payload.qiniuAuth;
92 | },
93 | UPLOAD_OPTIONS_CHANGE: function(state, payload) {
94 | state.uploadOptions = payload.uploadOptions;
95 | },
96 | }
97 | })
98 |
99 | export default store
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
82 |
124 |
--------------------------------------------------------------------------------
/src/components/SettingsSelf.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
8 |
11 |
12 |
13 |
14 |
15 |
80 |
81 |
90 |
--------------------------------------------------------------------------------
/src/components/RegistForm.vue:
--------------------------------------------------------------------------------
1 |
2 | 5 |
6 |
7 |
8 |
3 |
18 |
19 |
20 |
72 |
73 |
74 |
118 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # EN
2 | ## Cow-Bed
3 | A single page application for Qiniu image management which using Vue-cli(base on [museui](http://www.muse-ui.org)), front-end and back-end seperation. The back-end is based on express and Qiniu [nodejs-SDK](https://github.com/qiniu/nodejs-sdk).
4 | (Public zone is invalid)
5 | 
6 |
7 | ## Project Address:
8 | Source address: https://github.com/alex1504/vue-qiniu-image-bed
9 | Online address：http://cowbed.huzerui.com
10 |
11 | ## Function Development
12 | - [x] Private space and public space switching
13 | - [x] Upload with input element, drag file to upload, upload online pictures URL
14 | - [x] Outer chain replication (markdown)
15 | - [x] Picture management, preview, download, batch delete
16 | - [ ] Picture management by date
17 | - [ ] Picture rename
18 | - [ ] Audio and video resource management
19 |
20 | ## Technology Stack
21 | Front-end：
22 | - Vue2：Vue2.0 progressive MVVM framework
23 | - Vuex：Sharing state between different components
24 | - Vue-router：Single page application routing management plug-in
25 | - Axios：Http request tool
26 | - SASS(SCSS)：CSS preprocessing language
27 | - Webpack：Automated building tools
28 | - Localstorage：Local storage
29 |
30 | Backend：
31 | - Express：A concise and flexible framework for node.js Web applications
32 | - cors(Middleware)：Cross domain resource sharing
33 | - body-parse(Middleware)：Parsing the request body
34 | - formidable(Middleware)：Node.js module for parsing form data (form-data)
35 | - nodemon：Monitor modify auto restart node service plug-in
36 |
37 | ## Local Preview
38 | ```javascript
39 | git clone https://github.com/alex1504/vue-qiniu-image-bed.git
40 | cd https://github.com/alex1504/vue-qiniu-image-bed.git
41 | // Installation front-end dependency
42 | npm install
43 | cd server
44 | // Installation backend dependency
45 | npm install
46 | cd ../
47 | npm run dev
48 | // Open another git process
49 | npm run server
50 | ```
51 |
52 | ## Others
53 | 1. Using **localStorage** to save seven cattle authorization data.
54 | 2. Some resource libraries are introduced by CDN, which is provided by [**bootCDN**] (http://www.bootcdn.cn/).
55 | 3. If you have any questions, feedbacks or suggestions, please submit them to issue.
56 | 4. Welcome to **fork and star**, your support is the driving force for me to move forward.
57 |
58 | # CN
59 | ## 牛牛图床
60 | Vue-cli脚手架构建的七牛图片管理图床单页应用（基于[museui](http://www.muse-ui.org)，前后端分离，后端基于express及七牛[nodejs-SDK](https://github.com/qiniu/nodejs-sdk)开发。（公共空间已失效）
61 | 
62 |
63 | ## 项目地址：
64 | 源码地址：https://github.com/alex1504/vue-qiniu-image-bed
65 | 在线地址：http://cowbed.huzerui.com
66 |
67 | ## 功能开发
68 | - [x] 私人空间、公共空间切换
69 | - [x] 控件上传、拖拽本地图片上传、在线图片URL上传
70 | - [x] 外链复制（markdown）
71 | - [x] 图片管理、预览、下载、批量删除
72 | - [ ] 图片分日期管理
73 | - [ ] 图片重命名
74 | - [ ] 音频、视频资源管理
75 |
76 | ## 技术栈
77 | 前端：
78 | - Vue2：Vue2.0渐进式MVVM框架
79 | - Vuex：实现不同组件之间的状态共享
80 | - Vue-router：单页应用路由管理插件
81 | - Axios：Http请求工具
82 | - SASS(SCSS)：css预处理语言
83 | - Webpack：自动化构建工具
84 | - Localstorage：本地存储
85 |
86 | 后端：
87 | - Express：简洁而灵活的 node.js Web应用框架
88 | - cors（中间件）：跨域资源共享
89 | - body-parse（中间件）：对请求体进行解析
90 | - formidable（中间件）：解析表单数据（form-data）的Node.js模块
91 | - nodemon：监听修改自动重启node服务插件
92 |
93 | ## 本地预览
94 | ```javascript
95 | git clone https://github.com/alex1504/vue-qiniu-image-bed.git
96 | cd https://github.com/alex1504/vue-qiniu-image-bed.git
97 | // 安装前端依赖
98 | npm install
99 | cd server
100 | // 安装后端依赖
101 | npm install
102 | cd ../
103 | npm run dev
104 | // 开启另一个git进程
105 | npm run server
106 | ```
107 |
108 | ## 其他
109 | 1. 项目前端使用**localStorage**保存七牛授权数据
110 | 2. 部分资源库采用CDN方式引入，由[**bootCDN**](http://www.bootcdn.cn/)提供
111 | 3. 若有任何问题、反馈或者建议，请提交issue中。
112 | 4. 若项目对你有所帮助，别忘了**star**一下。
113 |
--------------------------------------------------------------------------------
/src/components/Settings.vue:
--------------------------------------------------------------------------------
1 |
2 | 注册
4 | 17 |
3 |
4 |
8 |
23 |
24 |
25 | 你当前所处空间为：{{qiniuActive == 1 ? '私人空间' : '公共空间'}}
26 |
27 |
30 |
31 |
32 |
33 |
34 |
120 |
121 |
139 |
--------------------------------------------------------------------------------
/server/api/utils/qiniu.js:
--------------------------------------------------------------------------------
1 | var url = require('url');
2 | var crypto = require('crypto');
3 | var conf = require('./conf');
4 |
5 | // Check Timestamp Expired or not
6 | exports.isTimestampExpired = function(timestamp) {
7 | return timestamp < parseInt(Date.now() / 1000);
8 | }
9 |
10 | // Encoded Entry
11 | exports.encodedEntry = function(bucket, key) {
12 | return exports.urlsafeBase64Encode(bucket + (key ? ':' + key : ''));
13 | }
14 |
15 | // Get accessKey from uptoken
16 | exports.getAKFromUptoken = function(uploadToken) {
17 | var sepIndex = uploadToken.indexOf(":");
18 | return uploadToken.substring(0, sepIndex);
19 | }
20 |
21 | // Get bucket from uptoken
22 | exports.getBucketFromUptoken = function(uploadToken) {
23 | var sepIndex = uploadToken.lastIndexOf(":");
24 | var encodedPutPolicy = uploadToken.substring(sepIndex + 1);
25 | var putPolicy = exports.urlSafeBase64Decode(encodedPutPolicy);
26 | var putPolicyObj = JSON.parse(putPolicy);
27 | var scope = putPolicyObj.scope;
28 | var scopeSepIndex = scope.indexOf(":");
29 | if (scopeSepIndex == -1) {
30 | return scope;
31 | } else {
32 | return scope.substring(0, scopeSepIndex);
33 | }
34 | }
35 |
36 |
37 | exports.base64ToUrlSafe = function(v) {
38 | return v.replace(/\//g, '_').replace(/\+/g, '-');
39 | }
40 |
41 | exports.urlSafeToBase64 = function(v) {
42 | return v.replace(/\_/g, '/').replace(/\-/g, '+');
43 | }
44 |
45 | // UrlSafe Base64 Decode
46 | exports.urlsafeBase64Encode = function(jsonFlags) {
47 | var encoded = new Buffer(jsonFlags).toString('base64');
48 | return exports.base64ToUrlSafe(encoded);
49 | }
50 |
51 | // UrlSafe Base64 Decode
52 | exports.urlSafeBase64Decode = function(fromStr) {
53 | return new Buffer(exports.urlSafeToBase64(fromStr), 'base64').toString();
54 | }
55 |
56 | // Hmac-sha1 Crypt
57 | exports.hmacSha1 = function(encodedFlags, secretKey) {
58 | /*
59 | *return value already encoded with base64
60 | * */
61 | var hmac = crypto.createHmac('sha1', secretKey);
62 | hmac.update(encodedFlags);
63 | return hmac.digest('base64');
64 | }
65 |
66 | // 创建 AccessToken 凭证
67 | // @param mac AK&SK对象
68 | // @param requestURI 请求URL
69 | // @param reqBody 请求Body，仅当请求的 ContentType 为
70 | // application/x-www-form-urlencoded时才需要传入该参数
71 | exports.generateAccessToken = function(mac, requestURI, reqBody) {
72 | var u = url.parse(requestURI);
73 | var path = u.path;
74 | var access = path + '\n';
75 |
76 | if (reqBody) {
77 | access += reqBody;
78 | }
79 |
80 | var digest = exports.hmacSha1(access, mac.secretKey);
81 | var safeDigest = exports.base64ToUrlSafe(digest);
82 | return 'QBox ' + mac.accessKey + ':' + safeDigest;
83 | }
84 |
85 | // 创建 AccessToken 凭证
86 | // @param mac AK&SK对象
87 | // @param requestURI 请求URL
88 | // @param reqMethod 请求方法，例如 GET，POST
89 | // @param reqContentType 请求类型，例如 application/json 或者 application/x-www-form-urlencoded
90 | // @param reqBody 请求Body，仅当请求的 ContentType 为 application/json 或者
91 | // application/x-www-form-urlencoded 时才需要传入该参数
92 | exports.generateAccessTokenV2 = function (mac, requestURI, reqMethod, reqContentType, reqBody) {
93 | var u = url.parse(requestURI);
94 | var path = u.path;
95 | var query = u.query;
96 | var host = u.host;
97 | var port = u.port;
98 |
99 | var access = reqMethod.toUpperCase() + ' ' + path;
100 | if (query) {
101 | access += '?' + query;
102 | }
103 | // add host
104 | access += '\nHost: ' + host;
105 | // add port
106 | if (port) {
107 | access += ':' + port;
108 | }
109 |
110 | // add content type
111 | if (reqContentType && (reqContentType=="application/json" || reqContentType=="application/x-www-form-urlencoded")) {
112 | access += '\nContent-Type: ' + reqContentType;
113 | }
114 |
115 | access += '\n\n';
116 |
117 | // add reqbody
118 | if (reqBody) {
119 | access += reqBody;
120 | }
121 |
122 | console.log(access);
123 |
124 | var digest = exports.hmacSha1(access, mac.secretKey);
125 | var safeDigest = exports.base64ToUrlSafe(digest);
126 | return 'Qiniu ' + mac.accessKey + ':' + safeDigest;
127 | }
128 |
129 | // 校验七牛上传回调的Authorization
130 | // @param mac AK&SK对象
131 | // @param requestURI 回调的URL中的requestURI
132 | // @param reqBody 请求Body，仅当请求的ContentType为
133 | // application/x-www-form-urlencoded时才需要传入该参数
134 | // @param callbackAuth 回调时请求的Authorization头部值
135 | exports.isQiniuCallback = function(mac, requestURI, reqBody, callbackAuth) {
136 | var auth = exports.generateAccessToken(mac, requestURI, reqBody);
137 | return auth === callbackAuth;
138 | }
--------------------------------------------------------------------------------
/src/api/index.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import storage from '../utils/storage'
3 |
4 | if (process.env.NODE_ENV == 'development') {
5 | axios.defaults.baseURL = '/api';
6 | } else {
7 | axios.defaults.baseURL = 'http://193.112.174.142:3000';
8 | }
9 |
10 | export default {
11 | uploadFile(auth, files, uploadOptions) {
12 | return new Promise((resolve, reject) => {
13 | const formData = new FormData();
14 | Array.prototype.forEach.call(files, (file, index) => {
15 | formData.append("file" + index, file, file.name);
16 | })
17 | for (let key in auth) {
18 | formData.append(key, auth[key])
19 | }
20 | if (uploadOptions) {
21 | formData.append('isCustom', "1")
22 | formData.append('prefix', uploadOptions.prefix)
23 | }
24 | console.log(formData)
25 | const config = {
26 | headers: {
27 | "Content-Type": "multipart/form-data"
28 | }
29 | };
30 | axios.post("/upload", formData, config).then(res => {
31 | resolve(res)
32 | }).catch(err => {
33 | reject(err)
34 | });
35 | })
36 | },
37 | uploadFetchUrl(obj) {
38 | return new Promise((resolve, reject) => {
39 | let postData = {
40 | accessKey: obj.accessKey,
41 | secretKey: obj.secretKey,
42 | bucket: obj.bucket,
43 | fetchUrl: obj.fetchUrl
44 | }
45 | if (obj.uploadOptions) {
46 | postData.isCustom = "1"
47 | postData.prefix = obj.uploadOptions.prefix
48 | }
49 | axios.post("/upload/fetch", postData).then(res => {
50 | resolve(res)
51 | }).catch(err => {
52 | reject(err)
53 | });
54 | })
55 | },
56 | getImageList(auth, marker, limit) {
57 | return new Promise((resolve, reject) => {
58 | axios.post("/imageList", {
59 | accessKey: auth.accessKey,
60 | secretKey: auth.secretKey,
61 | bucket: auth.bucket,
62 | marker: marker,
63 | limit: limit
64 | }).then(res => {
65 | resolve(res)
66 | }).catch(err => {
67 | reject(err)
68 | });
69 | })
70 | },
71 | deleteImage(obj) {
72 | return new Promise((resolve, reject) => {
73 | axios.post("/image/delete", {
74 | accessKey: obj.accessKey,
75 | secretKey: obj.secretKey,
76 | bucket: obj.bucket,
77 | fileName: obj.fileName
78 | }).then(res => {
79 | resolve(res)
80 | }).catch(err => {
81 | reject(err)
82 | });
83 | })
84 | },
85 | shareImage(info) {
86 | return new Promise((resolve, reject) => {
87 | var Image = AV.Object.extend('Image');
88 | var image = new Image();
89 | image.set('title', info.title);
90 | image.set('keyword', info.keyword);
91 | image.set('type', info.type);
92 | image.set('source', info.source);
93 | image.save().then(function (image) {
94 | resolve(image)
95 | console.log('New object created with objectId: ' + image.id);
96 | }, function (error) {
97 | reject(error)
98 | // 异常处理
99 | console.error('Failed to create new object, with error message: ' + error.message);
100 | });
101 | })
102 | },
103 | searchImage(word) {
104 | return new Promise((resolve, reject) => {
105 | const titleQuery = new AV.Query('Image');
106 | titleQuery.contains('title', word);
107 |
108 | const keywordQuery = new AV.Query('Image');
109 | keywordQuery.equalTo('keyword', word);
110 |
111 | const typeQuery = new AV.Query('Image');
112 | typeQuery.equalTo('type', word);
113 |
114 | const query = AV.Query.or(titleQuery, keywordQuery, typeQuery);
115 |
116 | query.find().then(function (res) {
117 | res = res.map(obj => {
118 | return obj.attributes
119 | })
120 | resolve(res)
121 | }, function (error) {
122 | console.log(error)
123 | reject(error)
124 | });
125 | })
126 | },
127 | getShareImage() {
128 | return new Promise((resolve, reject) => {
129 | const query = new AV.Query('Image');
130 | query.find().then(function (res) {
131 | res = res.map(obj => {
132 | return {
133 | ...obj.attributes,
134 | id: obj.id,
135 | createdAt: new Date(obj.createdAt).getTime()
136 | }
137 | })
138 | resolve(res)
139 | }, function (error) {
140 | console.log(error)
141 | reject(error)
142 | });
143 |
144 | })
145 | },
146 | updateImageCount(id) {
147 | return new Promise((resolve, reject) => {
148 | var image = AV.Object.createWithoutData('Image', id);
149 | image.save().then(function (image) {
150 | image.increment('count', 1);
151 | image.save().then(function (res) {
152 | resolve(res)
153 | }, function (error) {
154 | reject(error)
155 | });
156 | })
157 | });
158 | }
159 |
160 | }
161 |
--------------------------------------------------------------------------------
/src/components/PostForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
21 |
22 |
4 |
19 |
20 |
21 |
129 |
154 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
6 |
8 |
9 |
12 |
13 |
15 | 牛牛图床
AccessKey
SecretKey
Bucket
Domain
19 | http://ory715icu.bkt.clouddn.com
20 |
3 |
17 |
26 |
30 |
31 |
32 |
113 |
114 |
153 |
--------------------------------------------------------------------------------
/src/components/ImageFinder.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
8 |
9 |
10 | 是否重命名文件：
5 |
11 |
16 | 文件上传前缀（自定义）：
12 |
13 |
14 |
15 | 14 |
18 |
25 | -
19 |
- 默认前缀： 20 |
- 可以保持文件名的唯一性，但文件名会被添加当前日期前缀并且重命名为8位随机数。 21 |
- 自定义前缀： 22 |
- 文件名不会被重命名，在上传文件名和已上传文件名重复的情况下，文件不会被上传 23 |
27 |
29 |
3 |
5 |
8 |
9 |
10 |
12 |
13 |
14 |
21 |
22 |
29 |
30 |
38 |
39 |
40 |
41 |
133 |
134 |
187 |
--------------------------------------------------------------------------------
/src/components/ImagePop.vue:
--------------------------------------------------------------------------------
1 |
2 | 最热
15 |
16 |
20 |
17 | ![]()
18 |
19 | 最新
23 |
24 |
28 |
25 | ![]()
26 |
27 | 搜索结果
31 |抱歉，找不到您想要的图片
32 |
33 |
37 |
34 | ![]()
35 |
36 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
40 |
41 |
42 |
43 |
184 |
185 |
284 |
--------------------------------------------------------------------------------
/server/api/controllers/qiniuController.js:
--------------------------------------------------------------------------------
1 | const qiniu = require('qiniu')
2 | const request = require('superagent')
3 | const formidable = require('formidable')
4 | const util = require('util');
5 | const qiniuUtil = require('../utils/qiniu')
6 | const bodyParser = require('body-parser')
7 |
8 | function renderUniFileName(type) {
9 | const map = {
10 | "jpg": new RegExp(/jpg|jpeg/),
11 | "png": new RegExp(/png/),
12 | "gif": new RegExp(/gif/)
13 | }
14 | let ext = "";
15 | if (map.jpg.test(type)) {
16 | ext = ".jpg"
17 | }
18 | if (map.png.test(type)) {
19 | ext = ".png"
20 | }
21 | if (map.gif.test(type)) {
22 | ext = ".gif"
23 | }
24 | const newDate = new Date(Date.now());
25 | const year = newDate.getFullYear();
26 | const month = newDate.getMonth() + 1;
27 | const date = newDate.getDate();
28 | const randomNum = Math.floor(Math.random() * 99999999);
29 | return `${year}-${month}-${date}/${randomNum}${ext}`
30 | }
31 |
32 | /**
33 | * [renderUploadToken Function]
34 | * @param fields: {{object}}
35 | */
36 | function renderUploadToken(fields) {
37 | const accessKey = fields.accessKey || '';
38 | const secretKey = fields.secretKey || '';
39 | const bucket = fields.bucket || '';
40 |
41 | const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
42 |
43 | const options = {
44 | scope: bucket,
45 | };
46 |
47 | const putPolicy = new qiniu.rs.PutPolicy(options);
48 | const uploadToken = putPolicy.uploadToken(mac);
49 |
50 | return uploadToken
51 |
52 | };
53 |
54 |
55 | /**
56 | * [uploadFile Function]
57 | * @param accessKey: {{string}}
58 | * @param secretKey: {{string}}
59 | * @param bucket：: {{string}}
60 | */
61 | function uploadFile(req, res) {
62 | const form = new formidable.IncomingForm();
63 |
64 | const uploadPromises = []
65 | form.parse(req, function (err, fields, files) {
66 | for (var fileKey in files) {
67 | const file = files[fileKey];
68 | const fileName = file.name;
69 | const isCustom = fields.isCustom;
70 | const prefix = fields.prefix || '';
71 | const localFile = file.path;
72 | const config = new qiniu.conf.Config();
73 | const formUploader = new qiniu.form_up.FormUploader(config);
74 | const putExtra = new qiniu.form_up.PutExtra();
75 | const uploadToken = renderUploadToken(fields);
76 |
77 | let key = '';
78 | if (isCustom == '1') {
79 | // 用户自定义前缀
80 | key = prefix + fileName;
81 | } else {
82 | // 默认前缀
83 | key = renderUniFileName(file.type);
84 | }
85 |
86 | const uploadPromise = new Promise((resolve, reject) => {
87 | // 文件上传
88 | formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr,
89 | respBody, respInfo) {
90 | if (respErr) {
91 | reject(respErr);
92 | return;
93 | }
94 | console.log(respBody)
95 | if (respInfo.statusCode == 200) {
96 | resolve({
97 | hash: respInfo.data.hash,
98 | key: respInfo.data.key,
99 | code: respInfo.statusCode
100 | })
101 | } else {
102 | reject(respBody)
103 | console.log(respInfo.statusCode);
104 | }
105 | });
106 |
107 | })
108 | uploadPromises.push(uploadPromise)
109 | }
110 | Promise.all(uploadPromises)
111 | .then(resp => {
112 | res.json(resp)
113 | })
114 | .catch(err => {
115 | res.json({
116 | code: 614,
117 | msg: err.error
118 | })
119 | })
120 |
121 | });
122 | };
123 |
124 |
125 | function fetchAndUpload(req, res) {
126 | const accessKey = req.body.accessKey || '';
127 | const secretKey = req.body.secretKey || '';
128 | const bucket = req.body.bucket || '';
129 | const fetchUrl = req.body.fetchUrl || '';
130 | const isCustom = req.body.isCustom || -1;
131 | const prefix = req.body.prefix || '';
132 | const matchType = fetchUrl.match(/\.jpg|\.jpeg|\.png|\.gif$/)
133 |
134 | if (!fetchUrl) {
135 | res.json({
136 | code: 400,
137 | msg: '参数fetchUrl不能为空'
138 | })
139 | return;
140 | }
141 |
142 | if (!matchType) {
143 | res.json({
144 | code: 415,
145 | msg: '只支持图片链接'
146 | })
147 | return;
148 | }
149 | const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
150 | const config = new qiniu.conf.Config();
151 | const bucketManager = new qiniu.rs.BucketManager(mac, config);
152 | const fileName = fetchUrl.match(/[^\/\\]+$/) && fetchUrl.match(/[^\/\\]+$/)[0];
153 |
154 | let key = '';
155 | if (isCustom == '1') {
156 | // 用户自定义前缀
157 | key = prefix + fileName;
158 | } else {
159 | // 默认前缀
160 | key = renderUniFileName(matchType[0]);
161 | }
162 |
163 | bucketManager.fetch(fetchUrl, bucket, key, function (err, respBody, respInfo) {
164 | if (err) {
165 | console.log(err);
166 | res.json({
167 | code: 204,
168 | msg: err.error
169 | })
170 | return;
171 | //throw err;
172 | } else {
173 | if (respInfo.statusCode == 200) {
174 | res.json({
175 | code: 200,
176 | hash: respBody.hash,
177 | key: respBody.key
178 | })
179 | } else {
180 | console.log(respInfo)
181 | res.json({
182 | code: respInfo.status,
183 | error: respBody.error
184 | })
185 | }
186 | }
187 | });
188 | }
189 |
190 | /**
191 | * [getImageInfo Function]
192 | * @param accessKey: {{string}}
193 | * @param secretKey: {{string}}
194 | * @param bucket：: {{string}}
195 | * @param fileName: {{string}}
196 | */
197 | function getImageInfo(req, res) {
198 | const accessKey = req.body.accessKey || '';
199 | const secretKey = req.body.secretKey || '';
200 | const bucket = req.body.bucket || '';
201 |
202 | var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
203 | var config = new qiniu.conf.Config();
204 | var bucketManager = new qiniu.rs.BucketManager(mac, config);
205 |
206 |
207 | var key = req.body.fileName || '';
208 | bucketManager.stat(bucket, key, function (err, respBody, respInfo) {
209 | if (err) {
210 | console.log(err);
211 | throw err;
212 | } else {
213 | if (respInfo.statusCode == 200) {
214 | res.json(respBody)
215 | console.log(respBody.hash);
216 | console.log(respBody.fsize);
217 | console.log(respBody.mimeType);
218 | console.log(respBody.putTime);
219 | console.log(respBody.type);
220 | } else {
221 | res.json({
222 | code: respInfo.statusCode,
223 | error: respBody.error
224 | })
225 | console.log(respInfo.statusCode);
226 | console.log(respBody.error);
227 | }
228 | }
229 | });
230 | }
231 |
232 | /**
233 | * [getImageList Function]
234 | * @param accessKey: {{string}}
235 | * @param secretKey: {{string}}
236 | * @param bucket：: {{string}}
237 | */
238 | function getImageList(req, res) {
239 | const accessKey = req.body.accessKey || ''
240 | const secretKey = req.body.secretKey || ''
241 | const bucket = req.body.bucket || ''
242 | const marker = req.body.marker || ''
243 | const limit = req.body.limit || 20
244 |
245 | console.log(accessKey)
246 | var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
247 |
248 | if (!Object.keys(req.body).length) {
249 | req.body = "";
250 | }
251 | const accessToken = qiniuUtil.generateAccessToken(mac, "http://rsf.qbox.me/list?bucket=" + bucket + '&limit=' + limit + '&marker=' + marker)
252 | request
253 | .post('http://rsf.qbox.me/list?bucket=' + bucket + '&limit=' + limit + '&marker=' + marker)
254 | .timeout(10000)
255 | .set('Host', 'rsf.qbox.me')
256 | .set('Content-Type', 'application/x-www-form-urlencoded')
257 | .set('Authorization', accessToken)
258 | .end((err, resp) => {
259 | if (err) {
260 | console.log(err);
261 | res.json({
262 | code: 204,
263 | msg: '请求七牛资源失败，请重试'
264 | })
265 | return;
266 | }
267 | if (resp.status == 200) {
268 | let data = resp.text.replace(/\\/, "");
269 | data = JSON.parse(data)
270 | data.items.sort((obj1, obj2) => {
271 | return obj2.putTime - obj1.putTime;
272 | });
273 | res.json({
274 | code: 200,
275 | data: data
276 | })
277 | } else {
278 | res.json({
279 | code: resp.status,
280 | msg: JSON.parse(resp.text).error
281 | })
282 | }
283 | });
284 | }
285 |
286 |
287 | /**
288 | * [deleteImage Function]
289 | * @param accessKey: {{string}}
290 | * @param secretKey: {{string}}
291 | * @param bucket: {{string}}
292 | * @param fileName: {{string}}
293 | */
294 | function deleteImage(req, res) {
295 | const accessKey = req.body.accessKey || '';
296 | const secretKey = req.body.secretKey || '';
297 | const bucket = req.body.bucket || '';
298 | const fileName = req.body.fileName || '';
299 |
300 | var mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
301 | if (!Object.keys(req.body).length) {
302 | req.body = "";
303 | }
304 |
305 | const encodeEntry = qiniuUtil.encodedEntry(bucket, fileName);
306 | const accessToken = qiniuUtil.generateAccessToken(mac, "http://rs.qiniu.com/delete/" + encodeEntry)
307 |
308 | request
309 | .post("http://rs.qiniu.com/delete/" + encodeEntry)
310 | .set('Host', 'rs.qiniu.com')
311 | .set('Content-Type', 'application/x-www-form-urlencoded')
312 | .set('Authorization', accessToken)
313 | .end((err, resp) => {
314 | if (resp.status == 200) {
315 | res.json({
316 | code: 200,
317 | msg: "删除成功"
318 | })
319 | } else {
320 | res.json({
321 | code: resp.status,
322 | msg: JSON.parse(resp.text).error
323 | })
324 | }
325 | });
326 | }
327 |
328 |
329 | module.exports = {
330 | renderUploadToken,
331 | uploadFile,
332 | getImageInfo,
333 | getImageList,
334 | deleteImage,
335 | fetchAndUpload
336 | }
337 |
--------------------------------------------------------------------------------
/src/components/RegistUserInfoForm.vue:
--------------------------------------------------------------------------------
1 |
2 |
35 |
36 |
37 |
200 |
201 |
202 |
304 |
--------------------------------------------------------------------------------
/src/components/Fileupload.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
21 |
11 |
20 |
12 | ![]()
13 |
15 |
16 |
17 |
18 |
19 |
22 |
39 |
23 |
26 |
28 |
29 |
31 |
35 |
36 |
37 |
38 | 分享成功后，图片会在广场中被检索到
24 |26 |
28 |
32 |
34 |
5 |
6 |
13 |
7 |
12 |
8 |
11 | {{tip}}
10 |
14 |
15 |
16 |
17 |
23 |
18 |
19 |
20 |
22 |
24 |
40 |
25 |
26 |
27 |
28 |
29 |
37 |
38 |
39 |
3 |
80 |
81 |
82 |
218 |
650 |
--------------------------------------------------------------------------------
4 |
19 |
5 |
6 |
7 |
8 | ![]()
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
20 |
79 |
21 |
61 |
62 |
78 |
22 | [{{dialogue.user}}
23 |
24 | ] enter the room, now totally
25 | {{dialogue.total}} person online.
26 |
27 |
28 |
29 |
43 |
44 |
30 |
42 |
31 |
35 |
32 | ![]()
33 |
34 |
36 | {{dialogue.content}}
37 |
38 |
39 | {{dialogue.time}}
40 |
41 |
45 |
59 |
60 |
46 |
58 |
47 |
51 |
48 | ![]()
49 |
50 |
52 | {{dialogue.content}}
53 |
54 |
55 | {{dialogue.time}}
56 |
57 |