31 |
32 |
33 | -
34 |
35 | JavaScript SDK 基于 h5 file api 开发，可以上传文件至七牛云存储。
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
48 |
49 |
51 |
52 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/api/index.test.ts:
--------------------------------------------------------------------------------
1 | import { DEFAULT_CHUNK_SIZE, Config } from '../upload'
2 | import { region } from '../config'
3 |
4 | import { getUploadUrl } from '.'
5 |
6 | jest.mock('../utils', () => ({
7 | ...jest.requireActual('../utils') as any,
8 |
9 | request: () => Promise.resolve({
10 | data: {
11 | up: {
12 | acc: {
13 | main: ['mock.qiniu.com']
14 | }
15 | }
16 | }
17 | }),
18 | getPutPolicy: () => ({
19 | ak: 'ak',
20 | bucket: 'bucket'
21 | })
22 | }))
23 |
24 | describe('api function test', () => {
25 | test('getUploadUrl', async () => {
26 | const config: Config = {
27 | useCdnDomain: true,
28 | disableStatisticsReport: false,
29 | retryCount: 3,
30 | checkByMD5: false,
31 | uphost: '',
32 | upprotocol: 'https',
33 | forceDirect: false,
34 | chunkSize: DEFAULT_CHUNK_SIZE,
35 | concurrentRequestLimit: 3
36 | }
37 |
38 | let url: string
39 | const token = 'token'
40 |
41 | url = await getUploadUrl(config, token)
42 | expect(url).toBe('https://mock.qiniu.com')
43 |
44 | config.region = region.z0
45 | url = await getUploadUrl(config, token)
46 | expect(url).toBe('https://upload.qiniup.com')
47 |
48 | config.upprotocol = 'https'
49 | url = await getUploadUrl(config, token)
50 | expect(url).toBe('https://upload.qiniup.com')
51 |
52 | config.upprotocol = 'http'
53 | url = await getUploadUrl(config, token)
54 | expect(url).toBe('http://upload.qiniup.com')
55 |
56 | config.upprotocol = 'https:'
57 | url = await getUploadUrl(config, token)
58 | expect(url).toBe('https://upload.qiniup.com')
59 |
60 | config.upprotocol = 'http:'
61 | url = await getUploadUrl(config, token)
62 | expect(url).toBe('http://upload.qiniup.com')
63 |
64 | config.uphost = 'qiniu.com'
65 | url = await getUploadUrl(config, token)
66 | expect(url).toBe('http://qiniu.com')
67 | })
68 | })
69 |
--------------------------------------------------------------------------------
/src/logger/index.ts:
--------------------------------------------------------------------------------
1 | import { reportV3, V3LogInfo } from './report-v3'
2 |
3 | export type LogLevel = 'INFO' | 'WARN' | 'ERROR' | 'OFF'
4 |
5 | export default class Logger {
6 | private static id = 0
7 |
8 | // 为每个类分配一个 id
9 | // 用以区分不同的上传任务
10 | private id = ++Logger.id
11 |
12 | constructor(
13 | private token: string,
14 | private disableReport = true,
15 | private level: LogLevel = 'OFF',
16 | private prefix = 'UPLOAD'
17 | ) { }
18 |
19 | private getPrintPrefix(level: LogLevel) {
20 | return `Qiniu-JS-SDK [${level}][${this.prefix}#${this.id}]:`
21 | }
22 |
23 | /**
24 | * @param {V3LogInfo} data 上报的数据。
25 | * @param {boolean} retry 重试次数，可选，默认为 3。
26 | * @description 向服务端上报统计信息。
27 | */
28 | report(data: V3LogInfo, retry?: number) {
29 | if (this.disableReport) return
30 | try {
31 | reportV3(this.token, data, retry)
32 | } catch (error) {
33 | this.warn(error)
34 | }
35 | }
36 |
37 | /**
38 | * @param {unknown[]} ...args
39 | * @description 输出 info 级别的调试信息。
40 | */
41 | info(...args: unknown[]) {
42 | const allowLevel: LogLevel[] = ['INFO']
43 | if (allowLevel.includes(this.level)) {
44 | // eslint-disable-next-line no-console
45 | console.log(this.getPrintPrefix('INFO'), ...args)
46 | }
47 | }
48 |
49 | /**
50 | * @param {unknown[]} ...args
51 | * @description 输出 warn 级别的调试信息。
52 | */
53 | warn(...args: unknown[]) {
54 | const allowLevel: LogLevel[] = ['INFO', 'WARN']
55 | if (allowLevel.includes(this.level)) {
56 | // eslint-disable-next-line no-console
57 | console.warn(this.getPrintPrefix('WARN'), ...args)
58 | }
59 | }
60 |
61 | /**
62 | * @param {unknown[]} ...args
63 | * @description 输出 error 级别的调试信息。
64 | */
65 | error(...args: unknown[]) {
66 | const allowLevel: LogLevel[] = ['INFO', 'WARN', 'ERROR']
67 | if (allowLevel.includes(this.level)) {
68 | // eslint-disable-next-line no-console
69 | console.error(this.getPrintPrefix('ERROR'), ...args)
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/test/demo3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
七牛云 - JavaScript SDK
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | -
17 |
18 | JavaScript SDK 基于 h5 file api 开发，可以上传文件至七牛云存储。
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
![]()
46 |
47 |
48 |
49 |
![]()
50 |
51 |
52 |
53 |
54 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/test/demo1/component/ui.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var init = function(obj) {
3 | var li_children =
4 | "
" +
5 | "
" +
6 | "
" +
7 | "
";
8 | var li = document.createElement("li");
9 | $(li).addClass("fragment");
10 | $(li).html(li_children);
11 | obj.node.append(li);
12 | };
13 | widget.register("li", {
14 | init: init
15 | });
16 | })();
17 |
18 | (function() {
19 | var init = function(obj) {
20 | var data = obj.data;
21 | var name = data.name;
22 | var size = data.size;
23 | var parent =
24 | "
" +
25 | name +
26 | "" +
27 | " | " +
28 | "
" +
29 | size +
30 | " | " +
31 | "
" +
32 | " " +
33 | " " +
34 | " " +
35 | " " +
36 | '' +
37 | " | ";
41 | var tr = document.createElement("tr");
42 | $(tr).html(parent);
43 | obj.node.append(tr);
44 | for (var i = 0; i < data.num; i++) {
45 | widget.add("li", {
46 | data: "",
47 | node: $(tr).find(".fragment-group")
48 | });
49 | }
50 | $(tr)
51 | .find(".resume")
52 | .on("click", function() {
53 | var ulDom = $(tr).find(".fragment-group");
54 | if (ulDom.hasClass("hide")) {
55 | ulDom.removeClass("hide");
56 | } else {
57 | ulDom.addClass("hide");
58 | }
59 | });
60 | return tr;
61 | };
62 | widget.register("tr", {
63 | init: init
64 | });
65 | })();
66 |
--------------------------------------------------------------------------------
/test/demo1/style/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: rgb(249, 249, 249);
3 | }
4 | .navbar {
5 | background-color: #fff;
6 | }
7 | .mainContainer {
8 | position: relative;
9 | top: 52px;
10 | }
11 | .mainContainer {
12 | width: 1170px;
13 | margin: 0 auto;
14 | padding: 15px 15px;
15 | }
16 | .mainContainer .row .tip li {
17 | list-style: none;
18 | }
19 | .mainContainer .nav-box ul li a {
20 | color: #777;
21 | }
22 | #box,
23 | #box2 {
24 | margin-top: 20px;
25 | height: 46px;
26 | }
27 | .fragment-group {
28 | overflow: hidden;
29 | padding-left: 0;
30 | }
31 | .hide {
32 | visibility: hidden;
33 | }
34 | .fragment-group .fragment {
35 | float: left;
36 | width: 30%;
37 | padding-right: 10px;
38 | list-style: none;
39 | margin-top: 10px;
40 | }
41 | .file-input {
42 | display: inline-block;
43 | box-sizing: border-box;
44 | width: 130px;
45 | height: 46px;
46 | opacity: 0;
47 | cursor: pointer;
48 | }
49 |
50 | .mainContainer .select-button {
51 | position: absolute;
52 | background-color: #00b7ee;
53 | color: #fff;
54 | font-size: 18px;
55 | padding: 0 30px;
56 | line-height: 44px;
57 | font-weight: 100;
58 | box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
59 | }
60 | .speed {
61 | margin-top: 15px;
62 | }
63 | .control-upload {
64 | line-height: 14px;
65 | margin-left: 10px;
66 | }
67 | .control-container {
68 | float: left;
69 | width: 20%;
70 | }
71 | #totalBar {
72 | margin-bottom: 40px;
73 | float: left;
74 | width: 80%;
75 | height: 30px;
76 | border: 1px solid;
77 | border-radius: 3px;
78 | }
79 | .linkWrapper img {
80 | width: 100px;
81 | height: 100px;
82 | }
83 | .modal-body {
84 | text-align: center;
85 | }
86 | .buttonList a {
87 | padding: 5px 10px;
88 | background: #fff;
89 | border-radius: 5px;
90 | color: #000;
91 | margin-left: 10px;
92 | cursor: pointer;
93 | }
94 | .buttonList ul {
95 | text-align: left;
96 | }
97 | .buttonList li {
98 | list-style: none;
99 | margin-top: 15px;
100 | }
101 | .disabled {
102 | background: #ccc;
103 | }
104 | .display a {
105 | display: block;
106 | background: #fff;
107 | }
108 |
--------------------------------------------------------------------------------
/test/demo1/scripts/uploadWithForm.js:
--------------------------------------------------------------------------------
1 | // 实现form直传无刷新并解决跨域问题
2 | function uploadWithForm(token, putExtra, config) {
3 | controlTabDisplay("form");
4 | // 获得上传地址
5 | qiniu.getUploadUrl(config, token).then(function(res){
6 | var uploadUrl = res;
7 | document.getElementsByName("token")[0].value = token;
8 | document.getElementsByName("url")[0].value = uploadUrl;
9 | // 当选择文件后执行的操作
10 | $("#select3").unbind("change").bind("change",function(){
11 | var iframe = createIframe();
12 | disableButtonOfSelect();
13 | var key = this.files[0].name;
14 | // 添加上传dom面板
15 | var board = addUploadBoard(this.files[0], config, key, "3");
16 | window.showRes = function(res){
17 | $(board)
18 | .find(".control-container")
19 | .html(
20 | "
Hash：" +
21 | res.hash +
22 | "
" +
23 | "
Bucket：" +
24 | res.bucket +
25 | "
"
26 | );
27 | }
28 | $(board)
29 | .find("#totalBar")
30 | .addClass("hide");
31 | $(board)
32 | .find(".control-upload")
33 | .on("click", function() {
34 | enableButtonOfSelect();
35 | // 把action地址指向我们的 node sdk 后端服务,通过后端来实现跨域访问
36 | $("#uploadForm").attr("target", iframe.name);
37 | $("#uploadForm")
38 | .attr("action", "/api/transfer")
39 | .submit();
40 | $(this).text("上传中...");
41 | $(this).attr("disabled", "disabled");
42 | $(this).css("backgroundColor", "#aaaaaa");
43 | });
44 | })
45 | });
46 | }
47 |
48 | function createIframe() {
49 | var iframe = document.createElement("iframe");
50 | iframe.name = "iframe" + Math.random();
51 | $("#directForm").append(iframe);
52 | iframe.style.display = "none";
53 | return iframe;
54 | }
55 |
56 | function enableButtonOfSelect() {
57 | $("#select3").removeAttr("disabled", "disabled");
58 | $("#directForm")
59 | .find("button")
60 | .css("backgroundColor", "#00b7ee");
61 | }
62 |
63 | function disableButtonOfSelect() {
64 | $("#select3").attr("disabled", "disabled");
65 | $("#directForm")
66 | .find("button")
67 | .css("backgroundColor", "#aaaaaa");
68 | }
69 |
70 |
--------------------------------------------------------------------------------
/site/src/components/Settings/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import * as utils from '../../utils'
4 |
5 | import { Input } from '../Input'
6 | import classnames from './style.less'
7 |
8 | interface IProps { }
9 |
10 | export function Settings(props: IProps) {
11 | const setting = React.useMemo(() => utils.loadSetting(), [])
12 | const [deadline, setDeadline] = React.useState
(0)
13 | const [uphost, seUphost] = React.useState(setting.uphost || '')
14 | const [assessKey, setAssessKey] = React.useState(setting.assessKey || '')
15 | const [secretKey, setSecretKey] = React.useState(setting.secretKey || '')
16 | const [bucketName, setBucketName] = React.useState(setting.bucketName || '')
17 |
18 | React.useEffect(() => {
19 | utils.saveSetting({
20 | assessKey,
21 | secretKey,
22 | bucketName,
23 | deadline,
24 | uphost
25 | })
26 | }, [assessKey, secretKey, bucketName, deadline, uphost])
27 |
28 | React.useEffect(() => {
29 | if (deadline > 0) return
30 | // 基于当前时间加上 3600s
31 | setDeadline(Math.floor(Date.now() / 1000) + 3600)
32 | }, [deadline])
33 |
34 | return (
35 |
59 | )
60 | }
61 |
--------------------------------------------------------------------------------
/site/src/components/Layout/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/site/src/components/SelectFile/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import folderIcon from './assets/folder.svg'
4 | import classnames from './style.less'
5 |
6 | export interface UniqueFile {
7 | key: string
8 | file: File
9 | }
10 |
11 | interface IProps {
12 | onFile(file: UniqueFile): void
13 | }
14 |
15 | enum State {
16 | Drop,
17 | Over,
18 | Leave
19 | }
20 |
21 | export function SelectFile(props: IProps): React.ReactElement {
22 | const [state, setState] = React.useState(null)
23 | const inputRef = React.useRef(null)
24 |
25 | const onClick = () => {
26 | if (!inputRef.current) return
27 | inputRef.current.value = ''
28 | inputRef.current.click()
29 | }
30 |
31 | const onDrop = (event: React.DragEvent) => {
32 | event.preventDefault()
33 | if (!event || !event.dataTransfer || !event.dataTransfer.files) return
34 | Array.from(event.dataTransfer.files).forEach(file => props.onFile({
35 | key: Date.now() + file.name,
36 | file
37 | }))
38 | setState(State.Drop)
39 | }
40 |
41 | const onChange = (event: React.ChangeEvent) => {
42 | if (!inputRef || !event || !event.target || !event.target.files) return
43 | Array.from(event.target.files).forEach(file => props.onFile({
44 | key: Date.now() + file.name,
45 | file
46 | }))
47 | }
48 |
49 | // 阻止默认的拖入文件处理
50 | React.useEffect(() => {
51 | const handler = (e: any) => e.preventDefault()
52 | document.addEventListener('dragover', handler)
53 | return () => {
54 | document.removeEventListener('dragover', handler)
55 | }
56 | }, [])
57 |
58 | return (
59 | setState(State.Over)}
64 | onDragLeave={() => setState(State.Leave)}
65 | >
66 |
67 |
68 |
69 |
70 | {State.Over === state && (
松开释放文件
)}
71 | {(state == null || State.Over !== state) && (
72 |
点击选择 OR 拖入文件
73 | )}
74 |
75 |
Hash：" +
40 | res.hash +
41 | "
" +
42 | "Bucket：" +
43 | res.bucket +
44 | "
"
45 | );
46 | if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
47 | imageDeal(board, res.key, domain);
48 | }
49 | };
50 |
51 | var next = function(response) {
52 | var chunks = response.chunks||[];
53 | var total = response.total;
54 | // 这里对每个chunk更新进度，并记录已经更新好的避免重复更新，同时对未开始更新的跳过
55 | for (var i = 0; i < chunks.length; i++) {
56 | if (chunks[i].percent === 0 || finishedAttr[i]){
57 | continue;
58 | }
59 | if (compareChunks[i].percent === chunks[i].percent){
60 | continue;
61 | }
62 | if (chunks[i].percent === 100){
63 | finishedAttr[i] = true;
64 | }
65 | $(board)
66 | .find(".fragment-group li")
67 | .eq(i)
68 | .find("#childBarColor")
69 | .css(
70 | "width",
71 | chunks[i].percent + "%"
72 | );
73 | }
74 | $(board)
75 | .find(".speed")
76 | .text("进度：" + total.percent + "% ");
77 | dom_total.css(
78 | "width",
79 | total.percent + "%"
80 | );
81 | compareChunks = chunks;
82 | };
83 |
84 | var subObject = {
85 | next: next,
86 | error: error,
87 | complete: complete
88 | };
89 | var subscription;
90 | // 调用sdk上传接口获得相应的observable，控制上传和暂停
91 | observable = qiniu.upload(file, key, token, putExtra, config);
92 |
93 | $(board)
94 | .find(".control-upload")
95 | .on("click", function() {
96 | if(board.start){
97 | $(this).text("暂停上传");
98 | board.start = false;
99 | subscription = observable.subscribe(subObject);
100 | }else{
101 | board.start = true;
102 | $(this).text("继续上传");
103 | subscription.unsubscribe();
104 | }
105 | });
106 | }
107 | })
108 | }
109 |
--------------------------------------------------------------------------------
/site/src/components/Queue/style.less:
--------------------------------------------------------------------------------
1 | .queue {
2 | width: 400px;
3 | padding-top: 1rem;
4 |
5 | list-style: none;
6 | margin-block-end: 0;
7 | margin-block-start: 0;
8 | padding-inline-start: 0;
9 |
10 | .item {
11 | margin: 10px 0;
12 |
13 | .content {
14 | display: flex;
15 | align-items: center;
16 | flex-direction: column;
17 |
18 | padding: 10px;
19 | border-radius: 14px;
20 | background-color: rgba(255, 255, 255, 0.3);
21 | box-shadow: 0px 5px 20px -5px rgba(0, 0, 0, 0.05);
22 |
23 | .top {
24 | position: relative;
25 |
26 | flex: 1;
27 | width: 100%;
28 | display: flex;
29 | flex-direction: row;
30 | align-items: center;
31 | justify-content: space-between;
32 | }
33 |
34 | .down {
35 | position: relative;
36 |
37 | flex: 1;
38 | width: 100%;
39 | display: flex;
40 | flex-direction: column;
41 | justify-content: center;
42 | align-items: center;
43 | }
44 | }
45 | }
46 | }
47 |
48 | .img {
49 | cursor: pointer;
50 | padding: 0.5rem;
51 | border-radius: 1rem;
52 | border: 1px solid rgba(0, 0, 0, 0.1);
53 | background-color: rgb(255, 255, 255);
54 | transition: .2s;
55 |
56 | &:hover {
57 | border: 1px solid rgba(0, 0, 0, 0.0);
58 | box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
59 | }
60 | }
61 |
62 | .progressBar {
63 | width: 100%;
64 | position: relative;
65 |
66 | display: flex;
67 | flex-wrap: wrap;
68 | flex-direction: row;
69 | align-items: center;
70 |
71 | list-style: none;
72 | padding-inline-start: 0;
73 |
74 | .expanded {
75 | flex: 1;
76 | }
77 |
78 | li {
79 | margin: 1px;
80 | padding: 1px;
81 | min-width: 4px;
82 | border-radius: 2px;
83 | border: #333 solid 1px;
84 |
85 | span {
86 | height: 10px;
87 | display: block;
88 | background-color: rgb(119, 140, 255);
89 | }
90 |
91 | .cachedChunk {
92 | background-color: rgb(53, 66, 139);
93 | }
94 | }
95 | }
96 |
97 | .fileName {
98 | font-size: 14px;
99 | text-overflow: ellipsis;
100 | white-space: nowrap;
101 | overflow: hidden
102 | }
103 |
104 | .speed {
105 | width: 100%;
106 | display: flex;
107 | flex-direction: row;
108 | justify-content: flex-start;
109 |
110 | .speedItem {
111 | padding: 4px;
112 | display: flex;
113 | flex-direction: row;
114 | align-items: center;
115 |
116 | .speedTitle {
117 | color: rgba(51, 51, 51, 0.8);
118 | font-size: 10px;
119 | margin-right: 0.5rem;
120 | }
121 |
122 | .speedValue {
123 | font-size: 14px;
124 | font-weight: bold;
125 | color: rgb(255, 78, 78);
126 | }
127 | }
128 | }
129 |
130 | .complete, .error {
131 | width: 70%;
132 | margin: 0 auto;
133 | color: white;
134 | font-size: 14px;
135 | text-align: center;
136 | padding: 0.2rem 1rem;
137 | border-radius: 0 0 10px 10px;
138 | overflow: hidden;
139 | cursor: pointer;
140 | transition: .2s;
141 | }
142 |
143 | .error {
144 | background-color: rgb(226, 46, 46, 0.5);
145 | }
146 |
147 | .complete {
148 | background-color: rgba(235, 235, 235, 0.788);
149 |
150 | .completeItem {
151 | display: flex;
152 |
153 | .key {
154 | color: #333;
155 | font-size: 10px;
156 | font-weight: bold;
157 | margin-right: 0.5rem;
158 | text-overflow: ellipsis;
159 | white-space: nowrap;
160 | overflow: hidden
161 | }
162 |
163 | .value {
164 | flex: 1;
165 | color: #333;
166 | font-size: 14px;
167 | text-align: left;
168 |
169 | text-overflow: ellipsis;
170 | white-space: nowrap;
171 | overflow: hidden
172 | }
173 | }
174 | }
175 |
--------------------------------------------------------------------------------
/src/upload/hosts.test.ts:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line import/newline-after-import
2 | import { MockApi } from '../api/index.mock'
3 | const mockApi = new MockApi()
4 | jest.mock('../api', () => mockApi)
5 |
6 | // eslint-disable-next-line import/first
7 | import { Host, HostPool } from './hosts'
8 |
9 | function sleep(time = 100) {
10 | return new Promise((resolve, _) => {
11 | setTimeout(resolve, time)
12 | })
13 | }
14 |
15 | describe('test hosts', () => {
16 | const getParams = ['accessKey', 'bucket', 'https'] as const
17 |
18 | test('getUp from api', async () => {
19 | const hostPool = new HostPool()
20 | const apiData = await mockApi.getUpHosts()
21 |
22 | // 无冻结行为每次获取到的都是第一个
23 | const actual1 = await hostPool.getUp(...getParams)
24 | expect(actual1?.host).toStrictEqual(apiData.data.up.acc.main[0])
25 |
26 | const actual2 = await hostPool.getUp(...getParams)
27 | expect(actual2?.host).toStrictEqual(apiData.data.up.acc.main[0])
28 |
29 | const actual3 = await hostPool.getUp(...getParams)
30 | expect(actual3?.host).toStrictEqual(apiData.data.up.acc.main[0])
31 | })
32 |
33 | test('getUp from config', async () => {
34 | const hostPool = new HostPool([
35 | 'host-1',
36 | 'host-2'
37 | ])
38 |
39 | // 无冻结行为每次获取到的都是第一个
40 | const actual1 = await hostPool.getUp(...getParams)
41 | expect(actual1).toStrictEqual(new Host('host-1', 'https'))
42 |
43 | const actual2 = await hostPool.getUp(...getParams)
44 | expect(actual2).toStrictEqual(new Host('host-1', 'https'))
45 |
46 | const actual3 = await hostPool.getUp(...getParams)
47 | expect(actual3).toStrictEqual(new Host('host-1', 'https'))
48 | })
49 |
50 | test('freeze & unfreeze', async () => {
51 | const hostPool = new HostPool([
52 | 'host-1',
53 | 'host-2'
54 | ])
55 |
56 | // 测试冻结第一个
57 | const host1 = await hostPool.getUp(...getParams)
58 | expect(host1).toStrictEqual(new Host('host-1', 'https'))
59 | // eslint-disable-next-line no-unused-expressions
60 | host1?.freeze()
61 | await sleep()
62 |
63 | // 自动切换到了下一个可用的 host-2
64 | const host2 = await hostPool.getUp(...getParams)
65 | expect(host2).toStrictEqual(new Host('host-2', 'https'))
66 | // eslint-disable-next-line no-unused-expressions
67 | host2?.freeze()
68 | await sleep()
69 |
70 | // 以下是都被冻结情况的测试
71 |
72 | // 全部都冻结了，拿到的应该是离解冻时间最近的一个
73 | const actual1 = await hostPool.getUp(...getParams)
74 | expect(actual1).toStrictEqual(new Host('host-1', 'https'))
75 | // eslint-disable-next-line no-unused-expressions
76 | host1?.freeze() // 已经冻结的再次冻结相当于更新解冻时间
77 | await sleep()
78 |
79 | // 因为 host-1 刚更新过冻结时间，所以这个时候解冻时间优先的应该是 host-2
80 | const actual2 = await hostPool.getUp(...getParams)
81 | expect(actual2).toStrictEqual(new Host('host-2', 'https'))
82 | await sleep()
83 |
84 | // 测试解冻 host-2，拿到的应该是 host-2
85 | // eslint-disable-next-line no-unused-expressions
86 | host2?.unfreeze()
87 | const actual3 = await hostPool.getUp(...getParams)
88 | expect(actual3).toStrictEqual(new Host('host-2', 'https'))
89 | // eslint-disable-next-line no-unused-expressions
90 | host2?.freeze() // 测试完再冻结住
91 | await sleep()
92 |
93 | // 本来优先的现在应该是 host-1
94 | // 测试 host-2 冻结时间设置为 0，应该获取到 host-2
95 | // eslint-disable-next-line no-unused-expressions
96 | host2?.freeze(0)
97 | const actual4 = await hostPool.getUp(...getParams)
98 | expect(actual4).toStrictEqual(new Host('host-2', 'https'))
99 | // eslint-disable-next-line no-unused-expressions
100 | host2?.freeze()
101 | await sleep()
102 |
103 | // 测试自定义冻结时间
104 | // eslint-disable-next-line no-unused-expressions
105 | host1?.freeze(200)
106 | // eslint-disable-next-line no-unused-expressions
107 | host2?.freeze(100)
108 | const actual5 = await hostPool.getUp(...getParams)
109 | expect(actual5).toStrictEqual(new Host('host-2', 'https'))
110 | })
111 | })
112 |
--------------------------------------------------------------------------------
/src/upload/hosts.ts:
--------------------------------------------------------------------------------
1 | import { getUpHosts } from '../api'
2 | import { InternalConfig } from './base'
3 |
4 | /**
5 | * @description 解冻时间，key 是 host，value 为解冻时间
6 | */
7 | const unfreezeTimeMap = new Map()
8 |
9 | export class Host {
10 | constructor(public host: string, public protocol: InternalConfig['upprotocol']) { }
11 |
12 | /**
13 | * @description 当前 host 是否为冻结状态
14 | */
15 | isFrozen() {
16 | const currentTime = new Date().getTime()
17 | const unfreezeTime = unfreezeTimeMap.get(this.host)
18 | return unfreezeTime != null && unfreezeTime >= currentTime
19 | }
20 |
21 | /**
22 | * @param {number} time 单位秒，默认 20s
23 | * @description 冻结该 host 对象，该 host 将在指定时间内不可用
24 | */
25 | freeze(time = 20) {
26 | const unfreezeTime = new Date().getTime() + (time * 1000)
27 | unfreezeTimeMap.set(this.host, unfreezeTime)
28 | }
29 |
30 | /**
31 | * @description 解冻该 host
32 | */
33 | unfreeze() {
34 | unfreezeTimeMap.delete(this.host)
35 | }
36 |
37 | /**
38 | * @description 获取当前 host 的完整 url
39 | */
40 | getUrl() {
41 | return `${this.protocol}://${this.host}`
42 | }
43 |
44 | /**
45 | * @description 获取解冻时间
46 | */
47 | getUnfreezeTime() {
48 | return unfreezeTimeMap.get(this.host)
49 | }
50 | }
51 | export class HostPool {
52 | /**
53 | * @description 缓存的 host 表，以 bucket 和 accessKey 作为 key
54 | */
55 | private cachedHostsMap = new Map()
56 |
57 | /**
58 | * @param {string[]} initHosts
59 | * @description 如果在构造时传入 initHosts，则该 host 池始终使用传入的 initHosts 做为可用的数据
60 | */
61 | constructor(private initHosts: string[] = []) { }
62 |
63 | /**
64 | * @param {string} accessKey
65 | * @param {string} bucketName
66 | * @param {string[]} hosts
67 | * @param {InternalConfig['upprotocol']} protocol
68 | * @returns {void}
69 | * @description 注册可用 host
70 | */
71 | private register(accessKey: string, bucketName: string, hosts: string[], protocol: InternalConfig['upprotocol']): void {
72 | this.cachedHostsMap.set(
73 | `${accessKey}@${bucketName}`,
74 | hosts.map(host => new Host(host, protocol))
75 | )
76 | }
77 |
78 | /**
79 | * @param {string} accessKey
80 | * @param {string} bucketName
81 | * @param {InternalConfig['upprotocol']} protocol
82 | * @returns {Promise}
83 | * @description 刷新最新的 host 数据，如果用户在构造时该类时传入了 host 或者已经存在缓存则不会发起请求
84 | */
85 | private async refresh(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise {
86 | const cachedHostList = this.cachedHostsMap.get(`${accessKey}@${bucketName}`) || []
87 | if (cachedHostList.length > 0) return
88 |
89 | if (this.initHosts.length > 0) {
90 | this.register(accessKey, bucketName, this.initHosts, protocol)
91 | return
92 | }
93 |
94 | const response = await getUpHosts(accessKey, bucketName, protocol)
95 | if (response?.data != null) {
96 | const stashHosts: string[] = [
97 | ...(response.data.up?.acc?.main || []),
98 | ...(response.data.up?.acc?.backup || [])
99 | ]
100 | this.register(accessKey, bucketName, stashHosts, protocol)
101 | }
102 | }
103 |
104 | /**
105 | * @param {string} accessKey
106 | * @param {string} bucketName
107 | * @param {InternalConfig['upprotocol']} protocol
108 | * @returns {Promise}
109 | * @description 获取一个可用的上传 Host，排除已冻结的
110 | */
111 | public async getUp(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise {
112 | await this.refresh(accessKey, bucketName, protocol)
113 | const cachedHostList = this.cachedHostsMap.get(`${accessKey}@${bucketName}`) || []
114 |
115 | if (cachedHostList.length === 0) return null
116 | const availableHostList = cachedHostList.filter(host => !host.isFrozen())
117 | if (availableHostList.length > 0) return availableHostList[0]
118 |
119 | // 无可用的，去取离解冻最近的 host
120 | const priorityQueue = cachedHostList
121 | .slice().sort(
122 | (hostA, hostB) => (hostA.getUnfreezeTime() || 0) - (hostB.getUnfreezeTime() || 0)
123 | )
124 |
125 | return priorityQueue[0]
126 | }
127 | }
128 |
--------------------------------------------------------------------------------
/site/src/upload.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 |
3 | import { upload } from '../../src'
4 | import { UploadProgress } from '../../src/upload'
5 |
6 | import { generateUploadToken, loadSetting } from './utils'
7 |
8 | export enum Status {
9 | Ready, // 准备好了
10 | Processing, // 上传中
11 | Finished // 任务已结束（完成、失败、中断）
12 | }
13 |
14 | // 上传逻辑封装
15 | export function useUpload(file: File) {
16 | const startTimeRef = React.useRef(null)
17 | const [state, setState] = React.useState(null)
18 | const [error, setError] = React.useState(null)
19 | const [token, setToken] = React.useState(null)
20 | const [speedPeak, setSpeedPeak] = React.useState(null)
21 | const [completeInfo, setCompleteInfo] = React.useState(null)
22 | const [progress, setProgress] = React.useState(null)
23 | const [observable, setObservable] = React.useState | null>(null)
24 | const subscribeRef = React.useRef['subscribe']> | null>(null)
25 |
26 | // 开始上传文件
27 | const start = () => {
28 | startTimeRef.current = Date.now()
29 | setCompleteInfo(null)
30 | setProgress(null)
31 | setError(null)
32 |
33 | subscribeRef.current = observable?.subscribe({
34 | error: newError => { setState(Status.Finished); setError(newError) },
35 | next: newProgress => { setState(Status.Processing); setProgress(newProgress) },
36 | complete: newInfo => { setState(Status.Finished); setError(null); setCompleteInfo(newInfo) }
37 | }) || null
38 | }
39 |
40 | // 停止上传文件
41 | const stop = () => {
42 | const subscribe = subscribeRef.current
43 | if (state === Status.Processing && subscribe && !subscribe.closed) {
44 | setState(Status.Finished)
45 | subscribe.unsubscribe()
46 | }
47 | }
48 |
49 | // 获取上传速度
50 | const speed = React.useMemo(() => {
51 | if (progress == null || progress.total == null || progress.total.loaded == null) return 0
52 | const duration = (Date.now() - (startTimeRef.current || 0)) / 1000
53 |
54 | if (Array.isArray(progress.chunks)) {
55 | const size = progress.chunks.reduce(((acc, cur) => (
56 | !cur.fromCache ? cur.loaded + acc : acc
57 | )), 0)
58 |
59 | return size > 0 ? Math.floor(size / duration) : 0
60 | }
61 |
62 | return progress.total.loaded > 0
63 | ? Math.floor(progress.total.loaded / duration)
64 | : 0
65 | }, [progress, startTimeRef])
66 |
67 | // 获取 token
68 | React.useEffect(() => {
69 | const { assessKey, secretKey, bucketName, deadline } = loadSetting()
70 | if (token == null && (!assessKey || !secretKey || !bucketName || !deadline)) {
71 | setError(new Error('请点开设置并输入必要的配置信息'))
72 | return
73 | }
74 |
75 | // 线上应该使用服务端生成 token
76 | if (token != null) return
77 |
78 | // 确保所有必需的参数都存在后再调用 generateUploadToken
79 | if (assessKey && secretKey && bucketName && deadline) {
80 | setToken(generateUploadToken({ assessKey, secretKey, bucketName, deadline }))
81 | }
82 | }, [file, token])
83 |
84 | // 创建上传任务
85 | React.useEffect(() => {
86 | const { uphost } = loadSetting()
87 |
88 | if (token != null) {
89 | setState(Status.Ready)
90 | setObservable(upload(
91 | file,
92 | file.name,
93 | token,
94 | {
95 | metadata: {
96 | 'x-qn-meta-test': 'tt',
97 | 'x-qn-meta-test1': '222',
98 | 'x-qn-meta-test2': '333'
99 | }
100 | },
101 | {
102 | // checkByMD5: true,
103 | checkByServer: true,
104 | chunkSize: 2,
105 | concurrentRequestLimit: 3,
106 | debugLogLevel: 'INFO',
107 | uphost: uphost && uphost.split(',')
108 | }
109 | ))
110 | }
111 | }, [file, token])
112 |
113 | // 计算峰值上传速度
114 | React.useEffect(() => {
115 | if (speed == null) {
116 | setSpeedPeak(0)
117 | return
118 | }
119 |
120 | if (speed > (speedPeak || 0)) {
121 | setSpeedPeak(speed)
122 | }
123 | }, [speed, speedPeak])
124 |
125 | return { start, stop, state, progress, error, completeInfo, speed, speedPeak }
126 | }
127 |
--------------------------------------------------------------------------------
/src/utils/observable.ts:
--------------------------------------------------------------------------------
1 | /** 消费者接口 */
2 | export interface IObserver {
3 | /** 用来接收 Observable 中的 next 类型通知 */
4 | next: (value: T) => void
5 | /** 用来接收 Observable 中的 error 类型通知 */
6 | error: (err: E) => void
7 | /** 用来接收 Observable 中的 complete 类型通知 */
8 | complete: (res: C) => void
9 | }
10 |
11 | export interface NextObserver {
12 | next: (value: T) => void
13 | error?: (err: E) => void
14 | complete?: (res: C) => void
15 | }
16 |
17 | export interface ErrorObserver {
18 | next?: (value: T) => void
19 | error: (err: E) => void
20 | complete?: (res: C) => void
21 | }
22 |
23 | export interface CompletionObserver {
24 | next?: (value: T) => void
25 | error?: (err: E) => void
26 | complete: (res: C) => void
27 | }
28 |
29 | export type PartialObserver = NextObserver | ErrorObserver | CompletionObserver
30 |
31 | export interface IUnsubscribable {
32 | /** 取消 observer 的订阅 */
33 | unsubscribe(): void
34 | }
35 |
36 | /** Subscription 的接口 */
37 | export interface ISubscriptionLike extends IUnsubscribable {
38 | readonly closed: boolean
39 | }
40 |
41 | export type TeardownLogic = () => void
42 |
43 | export interface ISubscribable {
44 | subscribe(
45 | observer?: PartialObserver | ((value: T) => void),
46 | error?: (error: any) => void,
47 | complete?: () => void
48 | ): IUnsubscribable
49 | }
50 |
51 | /** 表示可清理的资源，比如 Observable 的执行 */
52 | class Subscription implements ISubscriptionLike {
53 | /** 用来标示该 Subscription 是否被取消订阅的标示位 */
54 | public closed = false
55 |
56 | /** 清理 subscription 持有的资源 */
57 | private _unsubscribe: TeardownLogic | undefined
58 |
59 | /** 取消 observer 的订阅 */
60 | unsubscribe() {
61 | if (this.closed) {
62 | return
63 | }
64 |
65 | this.closed = true
66 | if (this._unsubscribe) {
67 | this._unsubscribe()
68 | }
69 | }
70 |
71 | /** 添加一个 tear down 在该 Subscription 的 unsubscribe() 期间调用 */
72 | add(teardown: TeardownLogic) {
73 | this._unsubscribe = teardown
74 | }
75 | }
76 |
77 | /**
78 | * 实现 Observer 接口并且继承 Subscription 类，Observer 是消费 Observable 值的公有 API
79 | * 所有 Observers 都转化成了 Subscriber，以便提供类似 Subscription 的能力，比如 unsubscribe
80 | */
81 | export class Subscriber extends Subscription implements IObserver {
82 | protected isStopped = false
83 | protected destination: Partial>
84 |
85 | constructor(
86 | observerOrNext?: PartialObserver | ((value: T) => void) | null,
87 | error?: ((err: E) => void) | null,
88 | complete?: ((res: C) => void) | null
89 | ) {
90 | super()
91 |
92 | if (observerOrNext && typeof observerOrNext === 'object') {
93 | this.destination = observerOrNext
94 | } else {
95 | this.destination = {
96 | ...observerOrNext && { next: observerOrNext },
97 | ...error && { error },
98 | ...complete && { complete }
99 | }
100 | }
101 | }
102 |
103 | unsubscribe(): void {
104 | if (this.closed) {
105 | return
106 | }
107 |
108 | this.isStopped = true
109 | super.unsubscribe()
110 | }
111 |
112 | next(value: T) {
113 | if (!this.isStopped && this.destination.next) {
114 | this.destination.next(value)
115 | }
116 | }
117 |
118 | error(err: E) {
119 | if (!this.isStopped && this.destination.error) {
120 | this.isStopped = true
121 | this.destination.error(err)
122 | }
123 | }
124 |
125 | complete(result: C) {
126 | if (!this.isStopped && this.destination.complete) {
127 | this.isStopped = true
128 | this.destination.complete(result)
129 | }
130 | }
131 | }
132 |
133 | /** 可观察对象，当前的上传事件的集合 */
134 | export class Observable implements ISubscribable {
135 |
136 | constructor(private _subscribe: (subscriber: Subscriber) => TeardownLogic) {}
137 |
138 | subscribe(observer: PartialObserver): Subscription
139 | subscribe(next: null | undefined, error: null | undefined, complete: (res: C) => void): Subscription
140 | subscribe(next: null | undefined, error: (error: E) => void, complete?: (res: C) => void): Subscription
141 | subscribe(next: (value: T) => void, error: null | undefined, complete: (res: C) => void): Subscription
142 | subscribe(
143 | observerOrNext?: PartialObserver | ((value: T) => void) | null,
144 | error?: ((err: E) => void) | null,
145 | complete?: ((res: C) => void) | null
146 | ): Subscription {
147 | const sink = new Subscriber(observerOrNext, error, complete)
148 | sink.add(this._subscribe(sink))
149 | return sink
150 | }
151 | }
152 |
--------------------------------------------------------------------------------
/src/logger/index.test.ts:
--------------------------------------------------------------------------------
1 | import Logger from './index'
2 |
3 | let isCallReport = false
4 |
5 | jest.mock('./report-v3', () => ({
6 | reportV3: () => {
7 | isCallReport = true
8 | }
9 | }))
10 |
11 | // eslint-disable-next-line no-console
12 | const originalLog = console.log
13 | // eslint-disable-next-line no-console
14 | const originalWarn = console.warn
15 | // eslint-disable-next-line no-console
16 | const originalError = console.error
17 |
18 | const logMessage: unknown[] = []
19 | const warnMessage: unknown[] = []
20 | const errorMessage: unknown[] = []
21 |
22 | beforeAll(() => {
23 | // eslint-disable-next-line no-console
24 | console.log = jest.fn((...args: unknown[]) => logMessage.push(...args))
25 | // eslint-disable-next-line no-console
26 | console.warn = jest.fn((...args: unknown[]) => warnMessage.push(...args))
27 | // eslint-disable-next-line no-console
28 | console.error = jest.fn((...args: unknown[]) => errorMessage.push(...args))
29 | })
30 |
31 | afterAll(() => {
32 | // eslint-disable-next-line no-console
33 | console.log = originalLog
34 | // eslint-disable-next-line no-console
35 | console.warn = originalWarn
36 | // eslint-disable-next-line no-console
37 | console.error = originalError
38 | })
39 |
40 | describe('test logger', () => {
41 | test('level', () => {
42 | const infoLogger = new Logger('', true, 'INFO')
43 | infoLogger.info('test1')
44 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
45 | // @ts-ignore
46 | expect(logMessage).toStrictEqual([infoLogger.getPrintPrefix('INFO'), 'test1'])
47 | infoLogger.warn('test2')
48 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
49 | // @ts-ignore
50 | expect(warnMessage).toStrictEqual([infoLogger.getPrintPrefix('WARN'), 'test2'])
51 | infoLogger.error('test3')
52 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
53 | // @ts-ignore
54 | expect(errorMessage).toStrictEqual([infoLogger.getPrintPrefix('ERROR'), 'test3'])
55 |
56 | // 清空消息
57 | logMessage.splice(0, logMessage.length)
58 | warnMessage.splice(0, warnMessage.length)
59 | errorMessage.splice(0, errorMessage.length)
60 |
61 | const warnLogger = new Logger('', true, 'WARN')
62 | warnLogger.info('test1')
63 | expect(logMessage).toStrictEqual([])
64 | warnLogger.warn('test2')
65 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
66 | // @ts-ignore
67 | expect(warnMessage).toStrictEqual([warnLogger.getPrintPrefix('WARN'), 'test2'])
68 | warnLogger.error('test3')
69 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
70 | // @ts-ignore
71 | expect(errorMessage).toStrictEqual([warnLogger.getPrintPrefix('ERROR'), 'test3'])
72 |
73 | // 清空消息
74 | logMessage.splice(0, logMessage.length)
75 | warnMessage.splice(0, warnMessage.length)
76 | errorMessage.splice(0, errorMessage.length)
77 |
78 | const errorLogger = new Logger('', true, 'ERROR')
79 | errorLogger.info('test1')
80 | expect(logMessage).toStrictEqual([])
81 | errorLogger.warn('test2')
82 | expect(warnMessage).toStrictEqual([])
83 | errorLogger.error('test3')
84 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
85 | // @ts-ignore
86 | expect(errorMessage).toStrictEqual([errorLogger.getPrintPrefix('ERROR'), 'test3'])
87 |
88 | // 清空消息
89 | logMessage.splice(0, logMessage.length)
90 | warnMessage.splice(0, warnMessage.length)
91 | errorMessage.splice(0, errorMessage.length)
92 |
93 | const offLogger = new Logger('', true, 'OFF')
94 | offLogger.info('test1')
95 | expect(logMessage).toStrictEqual([])
96 | offLogger.warn('test2')
97 | expect(warnMessage).toStrictEqual([])
98 | offLogger.error('test3')
99 | expect(errorMessage).toStrictEqual([])
100 | })
101 |
102 | test('unique id', () => {
103 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
104 | // @ts-ignore
105 | const startId = Logger.id
106 | // eslint-disable-next-line no-new
107 | new Logger('', true, 'OFF')
108 | // eslint-disable-next-line no-new
109 | new Logger('', true, 'OFF')
110 | const last = new Logger('', true, 'OFF')
111 | // eslint-disable-next-line @typescript-eslint/ban-ts-comment
112 | // @ts-ignore
113 | expect(last.id).toStrictEqual(startId + 3)
114 | })
115 |
116 | test('report', () => {
117 | const logger1 = new Logger('', false, 'OFF')
118 | logger1.report(null as any)
119 | expect(isCallReport).toBeTruthy()
120 | isCallReport = false
121 | const logger2 = new Logger('', true, 'OFF')
122 | logger2.report(null as any)
123 | expect(isCallReport).toBeFalsy()
124 | })
125 | })
126 |
--------------------------------------------------------------------------------
/site/src/components/Queue/item.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import byteSize from 'byte-size'
3 | import { UploadProgress } from 'qiniu-js/esm/upload'
4 |
5 | import { Status, useUpload } from '../../upload'
6 | import startIcon from './assets/start.svg'
7 | import stopIcon from './assets/stop.svg'
8 | import classnames from './style.less'
9 |
10 | interface IProps {
11 | file: File
12 | }
13 |
14 | export function Item(props: IProps) {
15 | const {
16 | stop, start,
17 | speed, speedPeak,
18 | state, error, progress, completeInfo
19 | } = useUpload(props.file)
20 |
21 | return (
22 |
23 |
24 |
25 |
26 |
27 | {(state != null && [Status.Processing].includes(state)) && (
28 |
![]()
stop()}
31 | src={stopIcon}
32 | height="14"
33 | width="14"
34 | />
35 | )}
36 | {(state != null && [Status.Ready, Status.Finished].includes(state)) && (
37 |
![]()
start()}
39 | className={classnames.img}
40 | src={startIcon}
41 | height="14"
42 | width="14"
43 | />
44 | )}
45 |
46 |
47 |
51 |
52 |
53 |
54 |
101 | {chunks.map((chunk, index) => {
102 | const cacheName = chunk.fromCache ? classnames.cachedChunk : ''
103 | return (
104 | -
105 |
106 |
107 |
108 | )
109 | })}
110 |
111 | )
112 | }
113 |
114 | // 错误信息
115 | function ErrorView(props: { error: any }) {
116 | return (
117 | console.error(props.error)}
121 | style={props.error == null ? { height: 0, padding: 0 } : {}}
122 | >
123 | {props.error?.message || '发生未知错误！'}
124 |
125 | )
126 | }
127 |
128 | // 完成信息
129 | function CompleteView(props: { completeInfo: any }) {
130 | const render = (key: string, value: any) => (
131 |
132 | {key}:
133 | {value}
134 |
135 | )
136 |
137 | return (
138 | console.log(props.completeInfo)}
142 | style={props.completeInfo == null ? { height: 0, padding: 0 } : {}}
143 | >
144 | {Object.entries(props.completeInfo || {}).map(([key, value]) => render(key, value))}
145 |
146 | )
147 | }
148 |
--------------------------------------------------------------------------------
/src/api/index.ts:
--------------------------------------------------------------------------------
1 | import { stringify } from 'querystring'
2 |
3 | import { normalizeUploadConfig } from '../utils'
4 | import { Config, InternalConfig, UploadInfo } from '../upload'
5 | import * as utils from '../utils'
6 |
7 | interface UpHosts {
8 | data: {
9 | up: {
10 | acc: {
11 | main: string[]
12 | backup: string[]
13 | }
14 | }
15 | }
16 | }
17 |
18 | export async function getUpHosts(accessKey: string, bucketName: string, protocol: InternalConfig['upprotocol']): Promise {
19 | const params = stringify({ ak: accessKey, bucket: bucketName })
20 | const url = `${protocol}://api.qiniu.com/v2/query?${params}`
21 | return utils.request(url, { method: 'GET' })
22 | }
23 |
24 | /**
25 | * @param bucket 空间名
26 | * @param key 目标文件名
27 | * @param uploadInfo 上传信息
28 | */
29 | function getBaseUrl(bucket: string, key: string | null | undefined, uploadInfo: UploadInfo) {
30 | const { url, id } = uploadInfo
31 | return `${url}/buckets/${bucket}/objects/${key != null ? utils.urlSafeBase64Encode(key) : '~'}/uploads/${id}`
32 | }
33 |
34 | export interface InitPartsData {
35 | /** 该文件的上传 id， 后续该文件其他各个块的上传，已上传块的废弃，已上传块的合成文件，都需要该 id */
36 | uploadId: string
37 | /** uploadId 的过期时间 */
38 | expireAt: number
39 | }
40 |
41 | /**
42 | * @param token 上传鉴权凭证
43 | * @param bucket 上传空间
44 | * @param key 目标文件名
45 | * @param uploadUrl 上传地址
46 | */
47 | export function initUploadParts(
48 | token: string,
49 | bucket: string,
50 | key: string | null | undefined,
51 | uploadUrl: string
52 | ): utils.Response {
53 | const url = `${uploadUrl}/buckets/${bucket}/objects/${key != null ? utils.urlSafeBase64Encode(key) : '~'}/uploads`
54 | return utils.request(
55 | url,
56 | {
57 | method: 'POST',
58 | headers: utils.getAuthHeaders(token)
59 | }
60 | )
61 | }
62 |
63 | export interface UploadChunkData {
64 | etag: string
65 | md5: string
66 | }
67 |
68 | /**
69 | * @param token 上传鉴权凭证
70 | * @param index 当前 chunk 的索引
71 | * @param uploadInfo 上传信息
72 | * @param options 请求参数
73 | */
74 | export function uploadChunk(
75 | token: string,
76 | key: string | null | undefined,
77 | index: number,
78 | uploadInfo: UploadInfo,
79 | options: Partial
80 | ): utils.Response {
81 | const bucket = utils.getPutPolicy(token).bucketName
82 | const url = getBaseUrl(bucket, key, uploadInfo) + `/${index}`
83 | const headers = utils.getHeadersForChunkUpload(token)
84 | if (options.md5) headers['Content-MD5'] = options.md5
85 |
86 | return utils.request(url, {
87 | ...options,
88 | method: 'PUT',
89 | headers
90 | })
91 | }
92 |
93 | export type UploadCompleteData = any
94 |
95 | /**
96 | * @param token 上传鉴权凭证
97 | * @param key 目标文件名
98 | * @param uploadInfo 上传信息
99 | * @param options 请求参数
100 | */
101 | export function uploadComplete(
102 | token: string,
103 | key: string | null | undefined,
104 | uploadInfo: UploadInfo,
105 | options: Partial
106 | ): utils.Response {
107 | const bucket = utils.getPutPolicy(token).bucketName
108 | const url = getBaseUrl(bucket, key, uploadInfo)
109 | return utils.request(url, {
110 | ...options,
111 | method: 'POST',
112 | headers: utils.getHeadersForMkFile(token)
113 | })
114 | }
115 |
116 | /**
117 | * @param token 上传鉴权凭证
118 | * @param key 目标文件名
119 | * @param uploadInfo 上传信息
120 | */
121 | export function deleteUploadedChunks(
122 | token: string,
123 | key: string | null | undefined,
124 | uploadinfo: UploadInfo
125 | ): utils.Response {
126 | const bucket = utils.getPutPolicy(token).bucketName
127 | const url = getBaseUrl(bucket, key, uploadinfo)
128 | return utils.request(
129 | url,
130 | {
131 | method: 'DELETE',
132 | headers: utils.getAuthHeaders(token)
133 | }
134 | )
135 | }
136 |
137 | /**
138 | * @param {string} url
139 | * @param {FormData} data
140 | * @param {Partial} options
141 | * @returns Promise
142 | * @description 直传接口
143 | */
144 | export function direct(
145 | url: string,
146 | data: FormData,
147 | options: Partial
148 | ): Promise {
149 | return utils.request(url, {
150 | method: 'POST',
151 | body: data,
152 | ...options
153 | })
154 | }
155 |
156 | export type UploadUrlConfig = Partial>
157 |
158 | /**
159 | * @param {UploadUrlConfig} config
160 | * @param {string} token
161 | * @returns Promise
162 | * @description 获取上传 url
163 | */
164 | export async function getUploadUrl(_config: UploadUrlConfig, token: string): Promise {
165 | const config = normalizeUploadConfig(_config)
166 | const protocol = config.upprotocol
167 |
168 | if (config.uphost.length > 0) {
169 | return `${protocol}://${config.uphost[0]}`
170 | }
171 | const putPolicy = utils.getPutPolicy(token)
172 | const res = await getUpHosts(putPolicy.assessKey, putPolicy.bucketName, protocol)
173 | const hosts = res.data.up.acc.main
174 | return `${protocol}://${hosts[0]}`
175 | }
176 |
--------------------------------------------------------------------------------
/src/api/index.mock.ts:
--------------------------------------------------------------------------------
1 | import { QiniuNetworkError, QiniuRequestError } from '../errors'
2 | import * as api from '.'
3 |
4 | export const errorMap = {
5 | networkError: new QiniuNetworkError('mock', 'message'), // 网络错误
6 |
7 | invalidParams: new QiniuRequestError(400, 'mock', 'message'), // 无效的参数
8 | expiredToken: new QiniuRequestError(401, 'mock', 'message'), // token 过期
9 |
10 | gatewayUnavailable: new QiniuRequestError(502, 'mock', 'message'), // 网关不可用
11 | serviceUnavailable: new QiniuRequestError(503, 'mock', 'message'), // 服务不可用
12 | serviceTimeout: new QiniuRequestError(504, 'mock', 'message'), // 服务超时
13 | serviceError: new QiniuRequestError(599, 'mock', 'message'), // 服务错误
14 |
15 | invalidUploadId: new QiniuRequestError(612, 'mock', 'message') // 无效的 upload id
16 | }
17 |
18 | export type ApiName =
19 | | 'direct'
20 | | 'getUpHosts'
21 | | 'uploadChunk'
22 | | 'uploadComplete'
23 | | 'initUploadParts'
24 | | 'deleteUploadedChunks'
25 |
26 | export class MockApi {
27 | constructor() {
28 | this.direct = this.direct.bind(this)
29 | this.getUpHosts = this.getUpHosts.bind(this)
30 | this.uploadChunk = this.uploadChunk.bind(this)
31 | this.uploadComplete = this.uploadComplete.bind(this)
32 | this.initUploadParts = this.initUploadParts.bind(this)
33 | this.deleteUploadedChunks = this.deleteUploadedChunks.bind(this)
34 | }
35 |
36 | private interceptorMap = new Map()
37 | public clearInterceptor() {
38 | this.interceptorMap.clear()
39 | }
40 |
41 | public setInterceptor(name: 'direct', interceptor: typeof api.direct): void
42 | public setInterceptor(name: 'getUpHosts', interceptor: typeof api.getUpHosts): void
43 | public setInterceptor(name: 'uploadChunk', interceptor: typeof api.uploadChunk): void
44 | public setInterceptor(name: 'uploadComplete', interceptor: typeof api.uploadComplete): void
45 | public setInterceptor(name: 'initUploadParts', interceptor: typeof api.initUploadParts): void
46 | public setInterceptor(name: 'deleteUploadedChunks', interceptor: typeof api.deleteUploadedChunks): void
47 | public setInterceptor(name: ApiName, interceptor: any): void
48 | public setInterceptor(name: any, interceptor: any): void {
49 | this.interceptorMap.set(name, interceptor)
50 | }
51 |
52 | private callInterceptor(name: ApiName, defaultValue: any): any {
53 | const interceptor = this.interceptorMap.get(name)
54 | if (interceptor != null) {
55 | return interceptor()
56 | }
57 |
58 | return defaultValue
59 | }
60 |
61 | public direct(): ReturnType {
62 | const defaultData: ReturnType = Promise.resolve({
63 | reqId: 'req-id',
64 | data: {
65 | fsize: 270316,
66 | bucket: 'test2222222222',
67 | hash: 'Fs_k3kh7tT5RaFXVx3z1sfCyoa2Y',
68 | name: '84575bc9e34412d47cf3367b46b23bc7e394912a',
69 | key: '84575bc9e34412d47cf3367b46b23bc7e394912a.html'
70 | }
71 | })
72 |
73 | return this.callInterceptor('direct', defaultData)
74 | }
75 |
76 | public getUpHosts(): ReturnType {
77 | const defaultData: ReturnType = Promise.resolve({
78 | reqId: 'req-id',
79 | data: {
80 | ttl: 86400,
81 | io: { src: { main: ['iovip-z2.qbox.me'] } },
82 | up: {
83 | acc: {
84 | main: ['upload-z2.qiniup.com'],
85 | backup: ['upload-dg.qiniup.com', 'upload-fs.qiniup.com']
86 | },
87 | old_acc: { main: ['upload-z2.qbox.me'], info: 'compatible to non-SNI device' },
88 | old_src: { main: ['up-z2.qbox.me'], info: 'compatible to non-SNI device' },
89 | src: { main: ['up-z2.qiniup.com'], backup: ['up-dg.qiniup.com', 'up-fs.qiniup.com'] }
90 | },
91 | uc: { acc: { main: ['uc.qbox.me'] } },
92 | rs: { acc: { main: ['rs-z2.qbox.me'] } },
93 | rsf: { acc: { main: ['rsf-z2.qbox.me'] } },
94 | api: { acc: { main: ['api-z2.qiniu.com'] } }
95 | }
96 | })
97 |
98 | return this.callInterceptor('getUpHosts', defaultData)
99 | }
100 |
101 | public uploadChunk(): ReturnType {
102 | const defaultData: ReturnType = Promise.resolve({
103 | reqId: 'req-id',
104 | data: {
105 | etag: 'FuYYVJ1gmVCoGk5C5r5ftrLXxE6m',
106 | md5: '491309eddd8e7233e14eaa25216594b4'
107 | }
108 | })
109 |
110 | return this.callInterceptor('uploadChunk', defaultData)
111 | }
112 |
113 | public uploadComplete(): ReturnType {
114 | const defaultData: ReturnType = Promise.resolve({
115 | reqId: 'req-id',
116 | data: {
117 | key: 'test.zip',
118 | hash: 'lsril688bAmXn7kiiOe9fL4mpc39',
119 | fsize: 11009649,
120 | bucket: 'test',
121 | name: 'test'
122 | }
123 | })
124 |
125 | return this.callInterceptor('uploadComplete', defaultData)
126 | }
127 |
128 | public initUploadParts(): ReturnType {
129 | const defaultData: ReturnType = Promise.resolve({
130 | reqId: 'req-id',
131 | data: { uploadId: '60878b9408bc044043f5d74f', expireAt: 1620100628 }
132 | })
133 |
134 | return this.callInterceptor('initUploadParts', defaultData)
135 | }
136 |
137 | public deleteUploadedChunks(): ReturnType {
138 | const defaultData: ReturnType = Promise.resolve({
139 | reqId: 'req-id',
140 | data: undefined
141 | })
142 |
143 | return this.callInterceptor('deleteUploadedChunks', defaultData)
144 | }
145 | }
146 |
--------------------------------------------------------------------------------
/site/src/components/Layout/assets/setting.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/site/src/components/Settings/assets/setting.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
--------------------------------------------------------------------------------
/src/image/index.ts:
--------------------------------------------------------------------------------
1 | import { request, urlSafeBase64Encode } from '../utils'
2 |
3 | export interface ImageViewOptions {
4 | mode: number
5 | format?: string
6 | w?: number
7 | h?: number
8 | q?: number
9 | }
10 |
11 | export interface ImageWatermark {
12 | image: string
13 | mode: number
14 | fontsize?: number
15 | dissolve?: number
16 | dx?: number
17 | dy?: number
18 | gravity?: string
19 | text?: string
20 | font?: string
21 | fill?: string
22 | }
23 |
24 | export interface ImageMogr2 {
25 | 'auto-orient'?: boolean
26 | strip?: boolean
27 | thumbnail?: number
28 | crop?: number
29 | gravity?: number
30 | format?: number
31 | blur?: number
32 | quality?: number
33 | rotate?: number
34 | }
35 |
36 | type Pipeline =
37 | | (ImageWatermark & { fop: 'watermark' })
38 | | (ImageViewOptions & { fop: 'imageView2' })
39 | | (ImageMogr2 & { fop: 'imageMogr2' })
40 |
41 | export interface Entry {
42 | domain: string
43 | key: string
44 | }
45 |
46 | function getImageUrl(key: string, domain: string) {
47 | key = encodeURIComponent(key)
48 | if (domain.slice(domain.length - 1) !== '/') {
49 | domain += '/'
50 | }
51 |
52 | return domain + key
53 | }
54 |
55 | export function imageView2(op: ImageViewOptions, key?: string, domain?: string) {
56 | if (!/^\d$/.test(String(op.mode))) {
57 | throw 'mode should be number in imageView2'
58 | }
59 |
60 | const { mode, w, h, q, format } = op
61 |
62 | if (!w && !h) {
63 | throw 'param w and h is empty in imageView2'
64 | }
65 |
66 | let imageUrl = 'imageView2/' + encodeURIComponent(mode)
67 | imageUrl += w ? '/w/' + encodeURIComponent(w) : ''
68 | imageUrl += h ? '/h/' + encodeURIComponent(h) : ''
69 | imageUrl += q ? '/q/' + encodeURIComponent(q) : ''
70 | imageUrl += format ? '/format/' + encodeURIComponent(format) : ''
71 | if (key && domain) {
72 | imageUrl = getImageUrl(key, domain) + '?' + imageUrl
73 | }
74 | return imageUrl
75 | }
76 |
77 | // invoke the imageMogr2 api of Qiniu
78 | export function imageMogr2(op: ImageMogr2, key?: string, domain?: string) {
79 | const autoOrient = op['auto-orient']
80 | const { thumbnail, strip, gravity, crop, quality, rotate, format, blur } = op
81 |
82 | let imageUrl = 'imageMogr2'
83 |
84 | imageUrl += autoOrient ? '/auto-orient' : ''
85 | imageUrl += thumbnail ? '/thumbnail/' + encodeURIComponent(thumbnail) : ''
86 | imageUrl += strip ? '/strip' : ''
87 | imageUrl += gravity ? '/gravity/' + encodeURIComponent(gravity) : ''
88 | imageUrl += quality ? '/quality/' + encodeURIComponent(quality) : ''
89 | imageUrl += crop ? '/crop/' + encodeURIComponent(crop) : ''
90 | imageUrl += rotate ? '/rotate/' + encodeURIComponent(rotate) : ''
91 | imageUrl += format ? '/format/' + encodeURIComponent(format) : ''
92 | imageUrl += blur ? '/blur/' + encodeURIComponent(blur) : ''
93 | if (key && domain) {
94 | imageUrl = getImageUrl(key, domain) + '?' + imageUrl
95 | }
96 | return imageUrl
97 | }
98 |
99 | // invoke the watermark api of Qiniu
100 | export function watermark(op: ImageWatermark, key?: string, domain?: string) {
101 | const mode = op.mode
102 | if (!mode) {
103 | throw "mode can't be empty in watermark"
104 | }
105 |
106 | let imageUrl = 'watermark/' + mode
107 | if (mode !== 1 && mode !== 2) {
108 | throw 'mode is wrong'
109 | }
110 |
111 | if (mode === 1) {
112 | const image = op.image
113 | if (!image) {
114 | throw "image can't be empty in watermark"
115 | }
116 | imageUrl += image ? '/image/' + urlSafeBase64Encode(image) : ''
117 | }
118 |
119 | if (mode === 2) {
120 | const { text, font, fontsize, fill } = op
121 | if (!text) {
122 | throw "text can't be empty in watermark"
123 | }
124 | imageUrl += text ? '/text/' + urlSafeBase64Encode(text) : ''
125 | imageUrl += font ? '/font/' + urlSafeBase64Encode(font) : ''
126 | imageUrl += fontsize ? '/fontsize/' + fontsize : ''
127 | imageUrl += fill ? '/fill/' + urlSafeBase64Encode(fill) : ''
128 | }
129 |
130 | const { dissolve, gravity, dx, dy } = op
131 |
132 | imageUrl += dissolve ? '/dissolve/' + encodeURIComponent(dissolve) : ''
133 | imageUrl += gravity ? '/gravity/' + encodeURIComponent(gravity) : ''
134 | imageUrl += dx ? '/dx/' + encodeURIComponent(dx) : ''
135 | imageUrl += dy ? '/dy/' + encodeURIComponent(dy) : ''
136 | if (key && domain) {
137 | imageUrl = getImageUrl(key, domain) + '?' + imageUrl
138 | }
139 | return imageUrl
140 | }
141 |
142 | // invoke the imageInfo api of Qiniu
143 | export function imageInfo(key: string, domain: string) {
144 | const url = getImageUrl(key, domain) + '?imageInfo'
145 | return request(url, { method: 'GET' })
146 | }
147 |
148 | // invoke the exif api of Qiniu
149 | export function exif(key: string, domain: string) {
150 | const url = getImageUrl(key, domain) + '?exif'
151 | return request(url, { method: 'GET' })
152 | }
153 |
154 | export function pipeline(arr: Pipeline[], key?: string, domain?: string) {
155 | const isArray = Object.prototype.toString.call(arr) === '[object Array]'
156 | let option: Pipeline
157 | let errOp = false
158 | let imageUrl = ''
159 | if (isArray) {
160 | for (let i = 0, len = arr.length; i < len; i++) {
161 | option = arr[i]
162 | if (!option.fop) {
163 | throw "fop can't be empty in pipeline"
164 | }
165 | switch (option.fop) {
166 | case 'watermark':
167 | imageUrl += watermark(option) + '|'
168 | break
169 | case 'imageView2':
170 | imageUrl += imageView2(option) + '|'
171 | break
172 | case 'imageMogr2':
173 | imageUrl += imageMogr2(option) + '|'
174 | break
175 | default:
176 | errOp = true
177 | break
178 | }
179 | if (errOp) {
180 | throw 'fop is wrong in pipeline'
181 | }
182 | }
183 |
184 | if (key && domain) {
185 | imageUrl = getImageUrl(key, domain) + '?' + imageUrl
186 | const length = imageUrl.length
187 | if (imageUrl.slice(length - 1) === '|') {
188 | imageUrl = imageUrl.slice(0, length - 1)
189 | }
190 | }
191 | return imageUrl
192 | }
193 |
194 | throw "pipeline's first param should be array"
195 | }
196 |
--------------------------------------------------------------------------------
/src/utils/compress.ts:
--------------------------------------------------------------------------------
1 | import { QiniuErrorName, QiniuError } from '../errors'
2 |
3 | import { createObjectURL } from './helper'
4 |
5 | export interface CompressOptions {
6 | quality?: number
7 | noCompressIfLarger?: boolean
8 | maxWidth?: number
9 | maxHeight?: number
10 | }
11 |
12 | export interface Dimension {
13 | width?: number
14 | height?: number
15 | }
16 |
17 | export interface CompressResult {
18 | dist: Blob | File
19 | width: number
20 | height: number
21 | }
22 |
23 | const mimeTypes = {
24 | PNG: 'image/png',
25 | JPEG: 'image/jpeg',
26 | WEBP: 'image/webp',
27 | BMP: 'image/bmp'
28 | } as const
29 |
30 | const maxSteps = 4
31 | const scaleFactor = Math.log(2)
32 | const supportMimeTypes = Object.keys(mimeTypes).map(type => mimeTypes[type])
33 | const defaultType = mimeTypes.JPEG
34 |
35 | type MimeKey = keyof typeof mimeTypes
36 |
37 | function isSupportedType(type: string): type is typeof mimeTypes[MimeKey] {
38 | return supportMimeTypes.includes(type)
39 | }
40 |
41 | class Compress {
42 | private outputType: string
43 |
44 | constructor(private file: File, private config: CompressOptions) {
45 | this.config = {
46 | quality: 0.92,
47 | noCompressIfLarger: false,
48 | ...this.config
49 | }
50 | }
51 |
52 | async process(): Promise {
53 | this.outputType = this.file.type
54 | const srcDimension: Dimension = {}
55 | if (!isSupportedType(this.file.type)) {
56 | throw new QiniuError(
57 | QiniuErrorName.UnsupportedFileType,
58 | `unsupported file type: ${this.file.type}`
59 | )
60 | }
61 |
62 | const originImage = await this.getOriginImage()
63 | const canvas = await this.getCanvas(originImage)
64 | let scale = 1
65 | if (this.config.maxWidth) {
66 | scale = Math.min(1, this.config.maxWidth / canvas.width)
67 | }
68 | if (this.config.maxHeight) {
69 | scale = Math.min(1, scale, this.config.maxHeight / canvas.height)
70 | }
71 | srcDimension.width = canvas.width
72 | srcDimension.height = canvas.height
73 |
74 | const scaleCanvas = await this.doScale(canvas, scale)
75 | const distBlob = this.toBlob(scaleCanvas)
76 | if (distBlob.size > this.file.size && this.config.noCompressIfLarger) {
77 | return {
78 | dist: this.file,
79 | width: srcDimension.width,
80 | height: srcDimension.height
81 | }
82 | }
83 |
84 | return {
85 | dist: distBlob,
86 | width: scaleCanvas.width,
87 | height: scaleCanvas.height
88 | }
89 | }
90 |
91 | clear(ctx: CanvasRenderingContext2D, width: number, height: number) {
92 | // jpeg 没有 alpha 通道，透明区间会被填充成黑色，这里把透明区间填充为白色
93 | if (this.outputType === defaultType) {
94 | ctx.fillStyle = '#fff'
95 | ctx.fillRect(0, 0, width, height)
96 | } else {
97 | ctx.clearRect(0, 0, width, height)
98 | }
99 | }
100 |
101 | /** 通过 file 初始化 image 对象 */
102 | getOriginImage(): Promise {
103 | return new Promise((resolve, reject) => {
104 | const url = createObjectURL(this.file)
105 | const img = new Image()
106 | img.onload = () => {
107 | resolve(img)
108 | }
109 | img.onerror = () => {
110 | reject('image load error')
111 | }
112 | img.src = url
113 | })
114 | }
115 |
116 | getCanvas(img: HTMLImageElement): Promise {
117 | return new Promise((resolve, reject) => {
118 | const canvas = document.createElement('canvas')
119 | const context = canvas.getContext('2d')
120 |
121 | if (!context) {
122 | reject(new QiniuError(
123 | QiniuErrorName.GetCanvasContextFailed,
124 | 'context is null'
125 | ))
126 | return
127 | }
128 |
129 | const { width, height } = img
130 | canvas.height = height
131 | canvas.width = width
132 |
133 | this.clear(context, width, height)
134 | context.drawImage(img, 0, 0)
135 | resolve(canvas)
136 | })
137 | }
138 |
139 | async doScale(source: HTMLCanvasElement, scale: number) {
140 | if (scale === 1) {
141 | return source
142 | }
143 | // 不要一次性画图，通过设定的 step 次数，渐进式的画图，这样可以增加图片的清晰度，防止一次性画图导致的像素丢失严重
144 | const sctx = source.getContext('2d')
145 | const steps = Math.min(maxSteps, Math.ceil((1 / scale) / scaleFactor))
146 |
147 | const factor = scale ** (1 / steps)
148 |
149 | const mirror = document.createElement('canvas')
150 | const mctx = mirror.getContext('2d')
151 |
152 | let { width, height } = source
153 | const originWidth = width
154 | const originHeight = height
155 | mirror.width = width
156 | mirror.height = height
157 | if (!mctx || !sctx) {
158 | throw new QiniuError(
159 | QiniuErrorName.GetCanvasContextFailed,
160 | "mctx or sctx can't be null"
161 | )
162 | }
163 |
164 | let src!: CanvasImageSource
165 | let context!: CanvasRenderingContext2D
166 | for (let i = 0; i < steps; i++) {
167 |
168 | let dw = width * factor | 0 // eslint-disable-line no-bitwise
169 | let dh = height * factor | 0 // eslint-disable-line no-bitwise
170 | // 到最后一步的时候 dw, dh 用目标缩放尺寸，否则会出现最后尺寸偏小的情况
171 | if (i === steps - 1) {
172 | dw = originWidth * scale
173 | dh = originHeight * scale
174 | }
175 |
176 | if (i % 2 === 0) {
177 | src = source
178 | context = mctx
179 | } else {
180 | src = mirror
181 | context = sctx
182 | }
183 | // 每次画前都清空，避免图像重叠
184 | this.clear(context, width, height)
185 | context.drawImage(src, 0, 0, width, height, 0, 0, dw, dh)
186 | width = dw
187 | height = dh
188 | }
189 |
190 | const canvas = src === source ? mirror : source
191 | // save data
192 | const data = context.getImageData(0, 0, width, height)
193 |
194 | // resize
195 | canvas.width = width
196 | canvas.height = height
197 |
198 | // store image data
199 | context.putImageData(data, 0, 0)
200 |
201 | return canvas
202 | }
203 |
204 | /** 这里把 base64 字符串转为 blob 对象 */
205 | toBlob(result: HTMLCanvasElement) {
206 | const dataURL = result.toDataURL(this.outputType, this.config.quality)
207 | const buffer = atob(dataURL.split(',')[1]).split('').map(char => char.charCodeAt(0))
208 | const blob = new Blob([new Uint8Array(buffer)], { type: this.outputType })
209 | return blob
210 | }
211 | }
212 |
213 | const compressImage = (file: File, options: CompressOptions) => new Compress(file, options).process()
214 |
215 | export default compressImage
216 |
--------------------------------------------------------------------------------
/test/demo1/common/common.js:
--------------------------------------------------------------------------------
1 | var BLOCK_SIZE = 4 * 1024 * 1024;
2 |
3 | function addUploadBoard(file, config, key, type) {
4 | var count = Math.ceil(file.size / BLOCK_SIZE);
5 | var board = widget.add("tr", {
6 | data: { num: count, name: key, size: file.size },
7 | node: $("#fsUploadProgress" + type)
8 | });
9 | if (file.size > 100 * 1024 * 1024) {
10 | $(board).html("本实例最大上传文件100M");
11 | return "";
12 | }
13 | count > 1 && type != "3"
14 | ? ""
15 | : $(board)
16 | .find(".resume")
17 | .addClass("hide");
18 | return board;
19 | }
20 |
21 | function createXHR() {
22 | var xmlhttp = {};
23 | if (window.XMLHttpRequest) {
24 | xmlhttp = new XMLHttpRequest();
25 | } else {
26 | xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
27 | }
28 | return xmlhttp;
29 | }
30 |
31 | function getBoardWidth(board) {
32 | var total_width = $(board)
33 | .find("#totalBar")
34 | .outerWidth();
35 | $(board)
36 | .find(".fragment-group")
37 | .removeClass("hide");
38 | var child_width = $(board)
39 | .find(".fragment-group li")
40 | .children("#childBar")
41 | .outerWidth();
42 | $(board)
43 | .find(".fragment-group")
44 | .addClass("hide");
45 | return { totalWidth: total_width, childWidth: child_width };
46 | }
47 |
48 | function controlTabDisplay(type) {
49 | switch (type) {
50 | case "sdk":
51 | document.getElementById("box2").className = "";
52 | document.getElementById("box").className = "hide";
53 | break;
54 | case "others":
55 | document.getElementById("box2").className = "hide";
56 | document.getElementById("box").className = "";
57 | break;
58 | case "form":
59 | document.getElementById("box").className = "hide";
60 | document.getElementById("box2").className = "hide";
61 | break;
62 | }
63 | }
64 |
65 | var getRotate = function(url) {
66 | if (!url) {
67 | return 0;
68 | }
69 | var arr = url.split("/");
70 | for (var i = 0, len = arr.length; i < len; i++) {
71 | if (arr[i] === "rotate") {
72 | return parseInt(arr[i + 1], 10);
73 | }
74 | }
75 | return 0;
76 | };
77 |
78 | function imageControl(domain) {
79 | $(".modal-body")
80 | .find(".buttonList a")
81 | .on("click", function() {
82 | var img = document.getElementById("imgContainer").getElementsByTagName("img")[0]
83 | var oldUrl = img.src;
84 | var key = img.key;
85 | var originHeight = img.h;
86 | var fopArr = [];
87 | var rotate = getRotate(oldUrl);
88 | if (!$(this).hasClass("no-disable-click")) {
89 | $(this)
90 | .addClass("disabled")
91 | .siblings()
92 | .removeClass("disabled");
93 | if ($(this).data("imagemogr") !== "no-rotate") {
94 | fopArr.push({
95 | fop: "imageMogr2",
96 | "auto-orient": true,
97 | strip: true,
98 | rotate: rotate
99 | });
100 | }
101 | } else {
102 | $(this)
103 | .siblings()
104 | .removeClass("disabled");
105 | var imageMogr = $(this).data("imagemogr");
106 | if (imageMogr === "left") {
107 | rotate = rotate - 90 < 0 ? rotate + 270 : rotate - 90;
108 | } else if (imageMogr === "right") {
109 | rotate = rotate + 90 > 360 ? rotate - 270 : rotate + 90;
110 | }
111 | fopArr.push({
112 | fop: "imageMogr2",
113 | "auto-orient": true,
114 | strip: true,
115 | rotate: rotate
116 | });
117 | }
118 | $(".modal-body")
119 | .find("a.disabled")
120 | .each(function() {
121 | var watermark = $(this).data("watermark");
122 | var imageView = $(this).data("imageview");
123 | var imageMogr = $(this).data("imagemogr");
124 |
125 | if (watermark) {
126 | fopArr.push({
127 | fop: "watermark",
128 | mode: 1,
129 | image: "http://www.b1.qiniudn.com/images/logo-2.png",
130 | dissolve: 100,
131 | gravity: watermark,
132 | dx: 100,
133 | dy: 100
134 | });
135 | }
136 | if (imageView) {
137 | var height;
138 | switch (imageView) {
139 | case "large":
140 | height = originHeight;
141 | break;
142 | case "middle":
143 | height = originHeight * 0.5;
144 | break;
145 | case "small":
146 | height = originHeight * 0.1;
147 | break;
148 | default:
149 | height = originHeight;
150 | break;
151 | }
152 | fopArr.push({
153 | fop: "imageView2",
154 | mode: 3,
155 | h: parseInt(height, 10),
156 | q: 100
157 | });
158 | }
159 |
160 | if (imageMogr === "no-rotate") {
161 | fopArr.push({
162 | fop: "imageMogr2",
163 | "auto-orient": true,
164 | strip: true,
165 | rotate: 0
166 | });
167 | }
168 | });
169 | var newUrl = qiniu.pipeline(fopArr, key, domain);
170 |
171 | var newImg = new Image();
172 | img.src = "images/loading.gif"
173 | newImg.onload = function() {
174 | img.src = newUrl
175 | document.getElementById("imgContainer").href = newUrl
176 | };
177 | newImg.src = newUrl;
178 | return false;
179 | });
180 | }
181 |
182 | function imageDeal(board, key, domain) {
183 | var fopArr = [];
184 | //var img = $(".modal-body").find(".display img");
185 | var img = document.getElementById("imgContainer").getElementsByTagName("img")[0];
186 | img.key = key
187 | fopArr.push({
188 | fop: "watermark",
189 | mode: 1,
190 | image: "http://www.b1.qiniudn.com/images/logo-2.png",
191 | dissolve: 100,
192 | gravity: "NorthWest",
193 | ws: 0.8,
194 | dx: 100,
195 | dy: 100
196 | });
197 | fopArr.push({
198 | fop: "imageView2",
199 | mode: 2,
200 | h: 450,
201 | q: 100
202 | });
203 | var newUrl = qiniu.pipeline(fopArr, key, domain);
204 | $(board)
205 | .find(".wraper a")
206 | .html(
207 | '
' +
212 | '查看处理效果'
213 | );
214 | var newImg = new Image();
215 | img.src = "images/loading.gif"
216 | newImg.onload = function() {
217 | img.src = newUrl
218 | img.h = 450
219 | document.getElementById("imgContainer").href = newUrl
220 | };
221 | newImg.src = newUrl;
222 | }
223 |
--------------------------------------------------------------------------------
/src/utils/base64.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 |
3 | // https://github.com/locutusjs/locutus/blob/master/src/php/xml/utf8_encode.js
4 | function utf8Encode(argString: string) {
5 | // http://kevin.vanzonneveld.net
6 | // + original by: Webtoolkit.info (http://www.webtoolkit.info/)
7 | // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
8 | // + improved by: sowberry
9 | // + tweaked by: Jack
10 | // + bugfixed by: Onno Marsman
11 | // + improved by: Yves Sucaet
12 | // + bugfixed by: Onno Marsman
13 | // + bugfixed by: Ulrich
14 | // + bugfixed by: Rafal Kukawski
15 | // + improved by: kirilloid
16 | // + bugfixed by: kirilloid
17 | // * example 1: this.utf8Encode('Kevin van Zonneveld')
18 | // * returns 1: 'Kevin van Zonneveld'
19 |
20 | if (argString === null || typeof argString === 'undefined') {
21 | return ''
22 | }
23 |
24 | let string = argString + '' // .replace(/\r\n/g, '\n').replace(/\r/g, '\n')
25 | let utftext = '',
26 | start,
27 | end,
28 | stringl = 0
29 |
30 | start = end = 0
31 | stringl = string.length
32 | for (let n = 0; n < stringl; n++) {
33 | let c1 = string.charCodeAt(n)
34 | let enc = null
35 |
36 | if (c1 < 128) {
37 | end++
38 | } else if (c1 > 127 && c1 < 2048) {
39 | enc = String.fromCharCode((c1 >> 6) | 192, (c1 & 63) | 128)
40 | } else if ((c1 & 0xf800 ^ 0xd800) > 0) {
41 | enc = String.fromCharCode(
42 | (c1 >> 12) | 224,
43 | ((c1 >> 6) & 63) | 128,
44 | (c1 & 63) | 128
45 | )
46 | } else {
47 | // surrogate pairs
48 | if ((c1 & 0xfc00 ^ 0xd800) > 0) {
49 | throw new RangeError('Unmatched trail surrogate at ' + n)
50 | }
51 | let c2 = string.charCodeAt(++n)
52 | if ((c2 & 0xfc00 ^ 0xdc00) > 0) {
53 | throw new RangeError('Unmatched lead surrogate at ' + (n - 1))
54 | }
55 | c1 = ((c1 & 0x3ff) << 10) + (c2 & 0x3ff) + 0x10000
56 | enc = String.fromCharCode(
57 | (c1 >> 18) | 240,
58 | ((c1 >> 12) & 63) | 128,
59 | ((c1 >> 6) & 63) | 128,
60 | (c1 & 63) | 128
61 | )
62 | }
63 | if (enc !== null) {
64 | if (end > start) {
65 | utftext += string.slice(start, end)
66 | }
67 | utftext += enc
68 | start = end = n + 1
69 | }
70 | }
71 |
72 | if (end > start) {
73 | utftext += string.slice(start, stringl)
74 | }
75 |
76 | return utftext
77 | }
78 |
79 | // https://github.com/locutusjs/locutus/blob/master/src/php/xml/utf8_decode.js
80 | function utf8Decode(strData: string) {
81 | // eslint-disable-line camelcase
82 | // discuss at: https://locutus.io/php/utf8_decode/
83 | // original by: Webtoolkit.info (https://www.webtoolkit.info/)
84 | // input by: Aman Gupta
85 | // input by: Brett Zamir (https://brett-zamir.me)
86 | // improved by: Kevin van Zonneveld (https://kvz.io)
87 | // improved by: Norman "zEh" Fuchs
88 | // bugfixed by: hitwork
89 | // bugfixed by: Onno Marsman (https://twitter.com/onnomarsman)
90 | // bugfixed by: Kevin van Zonneveld (https://kvz.io)
91 | // bugfixed by: kirilloid
92 | // bugfixed by: w35l3y (https://www.wesley.eti.br)
93 | // example 1: utf8_decode('Kevin van Zonneveld')
94 | // returns 1: 'Kevin van Zonneveld'
95 |
96 | const tmpArr = []
97 | let i = 0
98 | let c1 = 0
99 | let seqlen = 0
100 |
101 | strData += ''
102 |
103 | while (i < strData.length) {
104 | c1 = strData.charCodeAt(i) & 0xFF
105 | seqlen = 0
106 |
107 | // https://en.wikipedia.org/wiki/UTF-8#Codepage_layout
108 | if (c1 <= 0xBF) {
109 | c1 = (c1 & 0x7F)
110 | seqlen = 1
111 | } else if (c1 <= 0xDF) {
112 | c1 = (c1 & 0x1F)
113 | seqlen = 2
114 | } else if (c1 <= 0xEF) {
115 | c1 = (c1 & 0x0F)
116 | seqlen = 3
117 | } else {
118 | c1 = (c1 & 0x07)
119 | seqlen = 4
120 | }
121 |
122 | for (let ai = 1; ai < seqlen; ++ai) {
123 | c1 = ((c1 << 0x06) | (strData.charCodeAt(ai + i) & 0x3F))
124 | }
125 |
126 | if (seqlen === 4) {
127 | c1 -= 0x10000
128 | tmpArr.push(String.fromCharCode(0xD800 | ((c1 >> 10) & 0x3FF)))
129 | tmpArr.push(String.fromCharCode(0xDC00 | (c1 & 0x3FF)))
130 | } else {
131 | tmpArr.push(String.fromCharCode(c1))
132 | }
133 |
134 | i += seqlen
135 | }
136 |
137 | return tmpArr.join('')
138 | }
139 |
140 | function base64Encode(data: any) {
141 | // http://kevin.vanzonneveld.net
142 | // + original by: Tyler Akins (http://rumkin.com)
143 | // + improved by: Bayron Guevara
144 | // + improved by: Thunder.m
145 | // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
146 | // + bugfixed by: Pellentesque Malesuada
147 | // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
148 | // - depends on: this.utf8Encode
149 | // * example 1: this.base64Encode('Kevin van Zonneveld')
150 | // * returns 1: 'S2V2aW4gdmFuIFpvbm5ldmVsZA=='
151 | // mozilla has this native
152 | // - but breaks in 2.0.0.12!
153 | // if (typeof this.window['atob'] == 'function') {
154 | // return atob(data)
155 | // }
156 | let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
157 | let o1,
158 | o2,
159 | o3,
160 | h1,
161 | h2,
162 | h3,
163 | h4,
164 | bits,
165 | i = 0,
166 | ac = 0,
167 | enc = '',
168 | tmp_arr = []
169 |
170 | if (!data) {
171 | return data
172 | }
173 |
174 | data = utf8Encode(data + '')
175 |
176 | do {
177 | // pack three octets into four hexets
178 | o1 = data.charCodeAt(i++)
179 | o2 = data.charCodeAt(i++)
180 | o3 = data.charCodeAt(i++)
181 |
182 | bits = (o1 << 16) | (o2 << 8) | o3
183 |
184 | h1 = (bits >> 18) & 0x3f
185 | h2 = (bits >> 12) & 0x3f
186 | h3 = (bits >> 6) & 0x3f
187 | h4 = bits & 0x3f
188 |
189 | // use hexets to index into b64, and append result to encoded string
190 | tmp_arr[ac++] =
191 | b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4)
192 | } while (i < data.length)
193 |
194 | enc = tmp_arr.join('')
195 |
196 | switch (data.length % 3) {
197 | case 1:
198 | enc = enc.slice(0, -2) + '=='
199 | break
200 | case 2:
201 | enc = enc.slice(0, -1) + '='
202 | break
203 | }
204 |
205 | return enc
206 | }
207 |
208 | function base64Decode(data: string) {
209 | // http://kevin.vanzonneveld.net
210 | // + original by: Tyler Akins (http://rumkin.com)
211 | // + improved by: Thunder.m
212 | // + input by: Aman Gupta
213 | // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
214 | // + bugfixed by: Onno Marsman
215 | // + bugfixed by: Pellentesque Malesuada
216 | // + improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
217 | // + input by: Brett Zamir (http://brett-zamir.me)
218 | // + bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
219 | // * example 1: base64_decode('S2V2aW4gdmFuIFpvbm5ldmVsZA==')
220 | // * returns 1: 'Kevin van Zonneveld'
221 | // mozilla has this native
222 | // - but breaks in 2.0.0.12!
223 | // if (typeof this.window['atob'] == 'function') {
224 | // return atob(data)
225 | // }
226 | let b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
227 | let o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
228 | ac = 0,
229 | dec = '',
230 | tmp_arr = []
231 |
232 | if (!data) {
233 | return data
234 | }
235 |
236 | data += ''
237 |
238 | do { // unpack four hexets into three octets using index points in b64
239 | h1 = b64.indexOf(data.charAt(i++))
240 | h2 = b64.indexOf(data.charAt(i++))
241 | h3 = b64.indexOf(data.charAt(i++))
242 | h4 = b64.indexOf(data.charAt(i++))
243 |
244 | bits = h1 << 18 | h2 << 12 | h3 << 6 | h4
245 |
246 | o1 = bits >> 16 & 0xff
247 | o2 = bits >> 8 & 0xff
248 | o3 = bits & 0xff
249 |
250 | if (h3 === 64) {
251 | tmp_arr[ac++] = String.fromCharCode(o1)
252 | } else if (h4 === 64) {
253 | tmp_arr[ac++] = String.fromCharCode(o1, o2)
254 | } else {
255 | tmp_arr[ac++] = String.fromCharCode(o1, o2, o3)
256 | }
257 | } while (i < data.length)
258 |
259 | dec = tmp_arr.join('')
260 |
261 | return utf8Decode(dec)
262 | }
263 |
264 | export function urlSafeBase64Encode(v: any) {
265 | v = base64Encode(v)
266 |
267 | // 参考 https://tools.ietf.org/html/rfc4648#section-5
268 | return v.replace(/\//g, '_').replace(/\+/g, '-')
269 | }
270 |
271 | export function urlSafeBase64Decode(v: any) {
272 | v = v.replace(/_/g, '/').replace(/-/g, '+')
273 | return base64Decode(v)
274 | }
275 |
--------------------------------------------------------------------------------
/test/demo1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 七牛云 - JavaScript SDK
7 |
8 |
9 |
10 |
11 |
12 |
13 |
30 |
31 |
32 |
33 | -
34 |
35 | JavaScript SDK 基于 h5 file api 开发，可以上传文件至七牛云存储。
36 |
37 |
38 | -
39 | 临时上传的空间不定时清空，请勿保存重要文件。
40 |
41 | -
42 | H5模式大于4M文件采用分块上传。
43 |
44 | -
45 | 上传图片可查看处理效果。
46 |
47 | -
48 | 本示例限制最大上传文件100M。
49 |
50 |
51 |
52 |
62 |
63 |
76 |
77 |
78 |
79 |
80 |
81 | | Filename |
82 | Size |
83 | Detail |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | | Filename |
96 | Size |
97 | Detail |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
126 |
127 |
128 |