Skip to content

Commit 47e5a98

Browse files
committedMay 1, 2019
feat: 改用WebUploader,实现粘贴上传,引入.prettierrc
1 parent 4ce0297 commit 47e5a98

9 files changed

+197
-171
lines changed
 

‎.prettierrc

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"singleQuote": true
4+
}

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,16 @@
77
* 一键复制链接到剪切板
88

99
## 配置
10-
![Snipaste_2018-02-25_10-04-52.png](http://ozfo4jjxb.bkt.clouddn.com/Snipaste_2018-02-25_10-04-52.png)
10+
![](http://mzzeast.shumsg.cn/FlgkICkL-2lNw8MlDpY2lyq5T38p)
1111

1212
## 上传
13-
![qiniu](https://user-images.githubusercontent.com/12164075/36637212-0f51287a-1a12-11e8-920a-c45f20cbf2e7.gif)
13+
![](http://mzzeast.shumsg.cn/FjAbiKaTjbNaxTXHJoLM7s0Vj3S8)
14+
三种上传方式:点击、拖拽、粘贴
1415

1516
## 安装
1617
* [商店安装](https://chrome.google.com/webstore/detail/%E4%B8%83%E7%89%9B%E4%BA%91%E5%9B%BE%E5%BA%8A/fmpbbmjlniogoldpglopponaibclkjdg?utm_source=chrome-ntp-icon)
1718
* 下载本项目,在 chrome://extensions 选择以开发者模式加载已解压的拓展程序。
1819

1920
## Reference
2021
[七牛云 JS SDK 文档](https://developer.qiniu.com/kodo/sdk/1283/javascript)
22+
[WebUploader API文档](http://fex.baidu.com/webuploader/doc/index.html)

‎Uploader.swf

140 KB
Binary file not shown.

‎css/app.css

+56-43
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,99 @@
11
#container {
2-
width: 400px;
3-
height: 400px;
2+
width: 400px;
3+
height: 400px;
44
}
55

66
#uploader {
7-
width: 380px;
8-
height: 200px;
9-
margin-left: 10px;
10-
border: 2px dashed #eee;
11-
display: flex;
12-
justify-content: center;
13-
align-items: center;
14-
flex-direction: column;
7+
width: 380px;
8+
height: 200px;
9+
margin-left: 10px;
10+
border: 2px dashed #eee;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
flex-direction: column;
1515
}
1616

1717
.display {
18-
margin-left: 10px;
18+
margin-left: 10px;
1919
}
2020

2121
.link-area {
22-
padding: 15px;
22+
padding: 15px;
2323
}
2424

2525
.link {
26-
display: flex;
26+
display: flex;
2727
}
2828

2929
.link h4 {
30-
width: 50px;
30+
width: 50px;
3131
}
3232

3333
.link input {
34-
width: 290px;
34+
width: 290px;
3535
}
3636

3737
.link button.input-action {
38-
visibility: hidden;
38+
visibility: hidden;
3939
}
4040

4141
.link > label {
42-
width: 6em;
43-
line-height: 34px;
44-
margin: 0;
42+
width: 6em;
43+
line-height: 34px;
44+
margin: 0;
4545
}
4646

4747
button.input-action {
48-
position: absolute;
49-
right: 0;
50-
bottom: 0;
51-
background-color: #DEDEDE;
52-
text-transform: uppercase;
53-
cursor: pointer;
54-
line-height: 1;
55-
font-size: 11px;
56-
padding: 2px 5px;
57-
border-radius: 4px;
58-
text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
59-
-webkit-touch-callout: none;
60-
-webkit-user-select: none;
61-
-moz-user-select: none;
62-
-ms-user-select: none;
63-
user-select: none;
48+
position: absolute;
49+
right: 0;
50+
bottom: 0;
51+
background-color: #dedede;
52+
text-transform: uppercase;
53+
cursor: pointer;
54+
line-height: 1;
55+
font-size: 11px;
56+
padding: 2px 5px;
57+
border-radius: 4px;
58+
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
59+
-webkit-touch-callout: none;
60+
-webkit-user-select: none;
61+
-moz-user-select: none;
62+
-ms-user-select: none;
63+
user-select: none;
6464
}
6565

6666
.link:hover button.input-action {
67-
visibility: visible;
67+
visibility: visible;
6868
}
6969

7070
.link .content {
71-
position: relative;
71+
position: relative;
7272
}
7373

7474
#link-area {
75-
margin-top: 1em;
75+
margin-top: 1em;
7676
}
7777

7878
.status {
79-
display: none;
80-
margin-top: 5px;
79+
display: none;
80+
margin-top: 5px;
8181
}
8282

8383
.status img {
84-
width: 16px;
85-
height: 16px;
86-
}
84+
width: 16px;
85+
height: 16px;
86+
}
87+
88+
#pickfiles {
89+
position: relative;
90+
}
91+
92+
#pickfiles div:last-child {
93+
position: absolute;
94+
left: 0 !important;
95+
top: 0 !important;
96+
width: 100% !important;
97+
height: 100% !important;
98+
opacity: 0;
99+
}

‎js/main.js

+128-124
Original file line numberDiff line numberDiff line change
@@ -1,134 +1,138 @@
1-
$(function () {
2-
const keys = ['ak', 'sk', 'bucket', 'domain'];
3-
let isConfig = true;
1+
$(function() {
2+
const keys = ['ak', 'sk', 'bucket', 'domain']
3+
let isConfig = true
44

5-
keys.forEach(key => {
6-
if (!localStorage[key]) {
7-
isConfig = false;
8-
}
9-
})
10-
11-
if (!isConfig) {
12-
chrome.tabs.create({url: 'options.html'});
5+
keys.forEach(key => {
6+
if (!localStorage[key]) {
7+
isConfig = false
138
}
14-
const uptoken = genUpToken(localStorage['ak'], localStorage['sk'], localStorage['bucket']);
15-
const domain = localStorage['domain'].indexOf('http') == -1 ? 'http://' + localStorage['domain'] : localStorage['domain'];
16-
var uploader = Qiniu.uploader({
17-
disable_statistics_report: false,
18-
runtimes: 'html5,flash,html4',
19-
browse_button: 'pickfiles',
20-
container: 'container',
21-
drop_element: 'container',
22-
max_file_size: '1000mb',
23-
flash_swf_url: 'bower_components/plupload/js/Moxie.swf',
24-
dragdrop: true,
25-
chunk_size: '4mb',
26-
multi_selection: !(moxie.core.utils.Env.OS.toLowerCase() === "ios"),
27-
uptoken: uptoken,
28-
domain: 'https://upload.qbox.me',
29-
get_new_uptoken: false,
30-
auto_start: true,
31-
log_level: 5,
32-
init: {
33-
'BeforeChunkUpload': function (up, file) {
34-
console.log("before chunk upload:", file.name);
35-
},
36-
'FilesAdded': function (up, files) {
37-
$('.words').html('上传中...');
38-
},
39-
'BeforeUpload': function (up, file) {
40-
console.log("this is a beforeupload function from init");
41-
var chunk_size = plupload.parseSize(this.getOption(
42-
'chunk_size'));
43-
},
44-
'UploadProgress': function (up, file) {
45-
},
46-
'UploadComplete': function () {
47-
$('.words').html('上传完成');
48-
$('.status').css('display', 'flex');
49-
setTimeout(() => {
50-
$('.status').css('display', 'none');
51-
}, 3000);
52-
$('#link-area').css('visibility', 'visible');
9+
})
10+
11+
if (!isConfig) {
12+
chrome.tabs.create({ url: 'options.html' })
13+
return
14+
}
15+
const uptoken = genUpToken(
16+
localStorage['ak'],
17+
localStorage['sk'],
18+
localStorage['bucket']
19+
)
5320

54-
},
55-
'FileUploaded': function (up, file, info) {
56-
console.log("response:", info.response);
57-
res = info.response;
58-
res = JSON.parse(res);
59-
const link = domain + '/' + res.key;
60-
const markdownLink = '![' + res.key + '](' + link + ')';
61-
const aLink = '<a href="' + link + '"><img src="' + link + '" alt="' + res.key + '"></a>';
62-
$('#link').val(link);
63-
$('#markdown').val(markdownLink);
64-
$('#a-link').val(aLink);
65-
},
66-
'Error': function (up, err, errTip) {
67-
if (errTip.indexOf('401') !== -1) {
68-
errTip = "鉴权失败,请确定AK/SK配置正确"
69-
}
70-
$('.words').html(`上传失败: ${errTip}`);
71-
$('.status').css('display', 'flex');
72-
$('.status img').css('display', 'none');
73-
setTimeout(() => {
74-
$('.status').css('display', 'none');
75-
$('.status img').css('display', 'unset');
76-
}, 5000);
77-
$('#link-area').css('visibility', 'visible');
78-
}
79-
}
80-
});
21+
const domain =
22+
localStorage['domain'].indexOf('http') == -1
23+
? 'http://' + localStorage['domain']
24+
: localStorage['domain']
8125

82-
$('#container').on(
83-
'dragenter',
84-
function (e) {
85-
e.preventDefault();
86-
$('#container').addClass('draging');
87-
e.stopPropagation();
88-
}
89-
).on('drop', function (e) {
90-
e.preventDefault();
91-
$('#container').removeClass('draging');
92-
e.stopPropagation();
93-
}).on('dragleave', function (e) {
94-
e.preventDefault();
95-
$('#container').removeClass('draging');
96-
e.stopPropagation();
97-
}).on('dragover', function (e) {
98-
e.preventDefault();
99-
$('#container').addClass('draging');
100-
e.stopPropagation();
101-
});
26+
var uploader = WebUploader.create({
27+
auto: true,
28+
swf: 'Uploader.swf',
29+
server: 'https://upload.qbox.me',
30+
pick: '#pickfiles',
31+
resize: false,
32+
dnd: '#container',
33+
paste: document.body,
34+
disableGlobalDnd: true,
35+
accept: [
36+
{
37+
title: 'Images',
38+
extensions: 'gif,jpg,jpeg,bmp,png',
39+
mimeTypes: 'image/*'
40+
}
41+
],
42+
compress: false,
43+
prepareNextFile: true,
44+
chunked: true,
45+
chunkSize: 4194304,
46+
threads: 5,
47+
fileNumLimit: 100,
48+
fileSingleSizeLimit: 10000 * 1024 * 1024,
49+
duplicate: true,
50+
formData: {
51+
token: uptoken
52+
}
53+
})
54+
uploader.on('startUpload', () => {
55+
$('.status').css('display', 'flex')
56+
$('.words').html('上传中...')
57+
})
58+
uploader.on('uploadSuccess', (file, res) => {
59+
$('.words').html('上传完成')
60+
setTimeout(() => {
61+
$('.status').css('display', 'none')
62+
}, 3000)
63+
$('#link-area').css('visibility', 'visible')
64+
console.log('response:', res)
65+
const link = domain + '/' + res.key
66+
const markdownLink = `![](${link})`
67+
const aLink =`<img src="${link}" />`
68+
$('#link').val(link)
69+
$('#markdown').val(markdownLink)
70+
$('#a-link').val(aLink)
71+
})
72+
uploader.on('uploadError', (file, reason) => {
73+
if (reason === 'http') {
74+
reason = '请检查AK/SK等配置正确,然后重新开启本窗口'
75+
}
76+
$('.words').html(`上传失败: ${reason}`)
77+
$('.status').css('display', 'flex')
78+
$('.status img').css('display', 'none')
79+
setTimeout(() => {
80+
$('.status').css('display', 'none')
81+
$('.status img').css('display', 'unset')
82+
}, 5000)
83+
$('#link-area').css('visibility', 'visible')
84+
})
85+
86+
$('#container')
87+
.on('dragenter', function(e) {
88+
e.preventDefault()
89+
$('#container').addClass('draging')
90+
e.stopPropagation()
91+
})
92+
.on('drop', function(e) {
93+
e.preventDefault()
94+
$('#container').removeClass('draging')
95+
e.stopPropagation()
96+
})
97+
.on('dragleave', function(e) {
98+
e.preventDefault()
99+
$('#container').removeClass('draging')
100+
e.stopPropagation()
101+
})
102+
.on('dragover', function(e) {
103+
e.preventDefault()
104+
$('#container').addClass('draging')
105+
e.stopPropagation()
106+
})
102107

103-
$('#link-area button[data-action=copy]').on('click', function (e) {
104-
const btn = e.target;
105-
const targetId = $(btn).attr('data-action-target');
106-
const val = $(targetId).val();
107-
copyToClipboard(val);
108-
});
108+
$('#link-area button[data-action=copy]').on('click', function(e) {
109+
const btn = e.target
110+
const targetId = $(btn).attr('data-action-target')
111+
const val = $(targetId).val()
112+
copyToClipboard(val)
113+
})
109114

110-
function copyToClipboard(input) {
111-
const el = document.createElement('textarea');
112-
el.style.fontsize = '12pt'
113-
el.style.border = '0'
114-
el.style.padding = '0'
115-
el.style.margin = '0'
116-
el.style.position = 'absolute'
117-
el.style.left = '-9999px'
118-
el.setAttribute('readonly', '')
119-
el.value = input
115+
function copyToClipboard(input) {
116+
const el = document.createElement('textarea')
117+
el.style.fontsize = '12pt'
118+
el.style.border = '0'
119+
el.style.padding = '0'
120+
el.style.margin = '0'
121+
el.style.position = 'absolute'
122+
el.style.left = '-9999px'
123+
el.setAttribute('readonly', '')
124+
el.value = input
120125

121-
document.body.appendChild(el)
122-
el.select()
126+
document.body.appendChild(el)
127+
el.select()
123128

124-
let success = false;
125-
try {
126-
success = document.execCommand('copy', true);
127-
} catch (err) {
128-
}
129+
let success = false
130+
try {
131+
success = document.execCommand('copy', true)
132+
} catch (err) {}
129133

130-
document.body.removeChild(el);
134+
document.body.removeChild(el)
131135

132-
return success;
133-
}
134-
});
136+
return success
137+
}
138+
})

‎js/qiniu.min.js

-1
This file was deleted.

‎js/webuploader.nolog.min.js

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manifest.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "七牛云图床",
44
"short_name": "七牛云图床",
55
"description": "通过七牛云云存储建立你自己的私有图床",
6-
"version": "0.0.3",
6+
"version": "0.0.4",
77
"icons": {
88
"16": "icons/image-16.png",
99
"48": "icons/image-48.png",

‎popup.html

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ <h3>拖放图片到这里上传图片</h3>
5454
<script type="text/javascript" src="js/crypto.js"></script>
5555
<script type="text/javascript" src="js/token.js"></script>
5656
<script type="text/javascript" src="js/qiniu.min.js"></script>
57+
<script type="text/javascript" src="js/webuploader.nolog.min.js"></script>
5758
<script type="text/javascript" src="js/main.js"></script>
5859
</body>
5960

0 commit comments

Comments
 (0)
Please sign in to comment.