1.init commit.
This commit is contained in:
atom
commit
a7491ebcec
|
|
@ -0,0 +1 @@
|
|||
VITE_APP_API_URL = https://picx.s1s.workers.dev
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
package-lock.json
|
||||
.idea
|
||||
yarn.lock
|
||||
dist
|
||||
|
|
@ -0,0 +1,201 @@
|
|||
Apache License
|
||||
Version 2.0, January 2004
|
||||
http://www.apache.org/licenses/
|
||||
|
||||
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||
|
||||
1. Definitions.
|
||||
|
||||
"License" shall mean the terms and conditions for use, reproduction,
|
||||
and distribution as defined by Sections 1 through 9 of this document.
|
||||
|
||||
"Licensor" shall mean the copyright owner or entity authorized by
|
||||
the copyright owner that is granting the License.
|
||||
|
||||
"Legal Entity" shall mean the union of the acting entity and all
|
||||
other entities that control, are controlled by, or are under common
|
||||
control with that entity. For the purposes of this definition,
|
||||
"control" means (i) the power, direct or indirect, to cause the
|
||||
direction or management of such entity, whether by contract or
|
||||
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||
|
||||
"You" (or "Your") shall mean an individual or Legal Entity
|
||||
exercising permissions granted by this License.
|
||||
|
||||
"Source" form shall mean the preferred form for making modifications,
|
||||
including but not limited to software source code, documentation
|
||||
source, and configuration files.
|
||||
|
||||
"Object" form shall mean any form resulting from mechanical
|
||||
transformation or translation of a Source form, including but
|
||||
not limited to compiled object code, generated documentation,
|
||||
and conversions to other media types.
|
||||
|
||||
"Work" shall mean the work of authorship, whether in Source or
|
||||
Object form, made available under the License, as indicated by a
|
||||
copyright notice that is included in or attached to the work
|
||||
(an example is provided in the Appendix below).
|
||||
|
||||
"Derivative Works" shall mean any work, whether in Source or Object
|
||||
form, that is based on (or derived from) the Work and for which the
|
||||
editorial revisions, annotations, elaborations, or other modifications
|
||||
represent, as a whole, an original work of authorship. For the purposes
|
||||
of this License, Derivative Works shall not include works that remain
|
||||
separable from, or merely link (or bind by name) to the interfaces of,
|
||||
the Work and Derivative Works thereof.
|
||||
|
||||
"Contribution" shall mean any work of authorship, including
|
||||
the original version of the Work and any modifications or additions
|
||||
to that Work or Derivative Works thereof, that is intentionally
|
||||
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||
or by an individual or Legal Entity authorized to submit on behalf of
|
||||
the copyright owner. For the purposes of this definition, "submitted"
|
||||
means any form of electronic, verbal, or written communication sent
|
||||
to the Licensor or its representatives, including but not limited to
|
||||
communication on electronic mailing lists, source code control systems,
|
||||
and issue tracking systems that are managed by, or on behalf of, the
|
||||
Licensor for the purpose of discussing and improving the Work, but
|
||||
excluding communication that is conspicuously marked or otherwise
|
||||
designated in writing by the copyright owner as "Not a Contribution."
|
||||
|
||||
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||
on behalf of whom a Contribution has been received by Licensor and
|
||||
subsequently incorporated within the Work.
|
||||
|
||||
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
copyright license to reproduce, prepare Derivative Works of,
|
||||
publicly display, publicly perform, sublicense, and distribute the
|
||||
Work and such Derivative Works in Source or Object form.
|
||||
|
||||
3. Grant of Patent License. Subject to the terms and conditions of
|
||||
this License, each Contributor hereby grants to You a perpetual,
|
||||
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||
(except as stated in this section) patent license to make, have made,
|
||||
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||
where such license applies only to those patent claims licensable
|
||||
by such Contributor that are necessarily infringed by their
|
||||
Contribution(s) alone or by combination of their Contribution(s)
|
||||
with the Work to which such Contribution(s) was submitted. If You
|
||||
institute patent litigation against any entity (including a
|
||||
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||
or a Contribution incorporated within the Work constitutes direct
|
||||
or contributory patent infringement, then any patent licenses
|
||||
granted to You under this License for that Work shall terminate
|
||||
as of the date such litigation is filed.
|
||||
|
||||
4. Redistribution. You may reproduce and distribute copies of the
|
||||
Work or Derivative Works thereof in any medium, with or without
|
||||
modifications, and in Source or Object form, provided that You
|
||||
meet the following conditions:
|
||||
|
||||
(a) You must give any other recipients of the Work or
|
||||
Derivative Works a copy of this License; and
|
||||
|
||||
(b) You must cause any modified files to carry prominent notices
|
||||
stating that You changed the files; and
|
||||
|
||||
(c) You must retain, in the Source form of any Derivative Works
|
||||
that You distribute, all copyright, patent, trademark, and
|
||||
attribution notices from the Source form of the Work,
|
||||
excluding those notices that do not pertain to any part of
|
||||
the Derivative Works; and
|
||||
|
||||
(d) If the Work includes a "NOTICE" text file as part of its
|
||||
distribution, then any Derivative Works that You distribute must
|
||||
include a readable copy of the attribution notices contained
|
||||
within such NOTICE file, excluding those notices that do not
|
||||
pertain to any part of the Derivative Works, in at least one
|
||||
of the following places: within a NOTICE text file distributed
|
||||
as part of the Derivative Works; within the Source form or
|
||||
documentation, if provided along with the Derivative Works; or,
|
||||
within a display generated by the Derivative Works, if and
|
||||
wherever such third-party notices normally appear. The contents
|
||||
of the NOTICE file are for informational purposes only and
|
||||
do not modify the License. You may add Your own attribution
|
||||
notices within Derivative Works that You distribute, alongside
|
||||
or as an addendum to the NOTICE text from the Work, provided
|
||||
that such additional attribution notices cannot be construed
|
||||
as modifying the License.
|
||||
|
||||
You may add Your own copyright statement to Your modifications and
|
||||
may provide additional or different license terms and conditions
|
||||
for use, reproduction, or distribution of Your modifications, or
|
||||
for any such Derivative Works as a whole, provided Your use,
|
||||
reproduction, and distribution of the Work otherwise complies with
|
||||
the conditions stated in this License.
|
||||
|
||||
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||
any Contribution intentionally submitted for inclusion in the Work
|
||||
by You to the Licensor shall be under the terms and conditions of
|
||||
this License, without any additional terms or conditions.
|
||||
Notwithstanding the above, nothing herein shall supersede or modify
|
||||
the terms of any separate license agreement you may have executed
|
||||
with Licensor regarding such Contributions.
|
||||
|
||||
6. Trademarks. This License does not grant permission to use the trade
|
||||
names, trademarks, service marks, or product names of the Licensor,
|
||||
except as required for reasonable and customary use in describing the
|
||||
origin of the Work and reproducing the content of the NOTICE file.
|
||||
|
||||
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||
agreed to in writing, Licensor provides the Work (and each
|
||||
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||
implied, including, without limitation, any warranties or conditions
|
||||
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||
appropriateness of using or redistributing the Work and assume any
|
||||
risks associated with Your exercise of permissions under this License.
|
||||
|
||||
8. Limitation of Liability. In no event and under no legal theory,
|
||||
whether in tort (including negligence), contract, or otherwise,
|
||||
unless required by applicable law (such as deliberate and grossly
|
||||
negligent acts) or agreed to in writing, shall any Contributor be
|
||||
liable to You for damages, including any direct, indirect, special,
|
||||
incidental, or consequential damages of any character arising as a
|
||||
result of this License or out of the use or inability to use the
|
||||
Work (including but not limited to damages for loss of goodwill,
|
||||
work stoppage, computer failure or malfunction, or any and all
|
||||
other commercial damages or losses), even if such Contributor
|
||||
has been advised of the possibility of such damages.
|
||||
|
||||
9. Accepting Warranty or Additional Liability. While redistributing
|
||||
the Work or Derivative Works thereof, You may choose to offer,
|
||||
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||
or other liability obligations and/or rights consistent with this
|
||||
License. However, in accepting such obligations, You may act only
|
||||
on Your own behalf and on Your sole responsibility, not on behalf
|
||||
of any other Contributor, and only if You agree to indemnify,
|
||||
defend, and hold each Contributor harmless for any liability
|
||||
incurred by, or claims asserted against, such Contributor by reason
|
||||
of your accepting any such warranty or additional liability.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
APPENDIX: How to apply the Apache License to your work.
|
||||
|
||||
To apply the Apache License to your work, attach the following
|
||||
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||
replaced with your own identifying information. (Don't include
|
||||
the brackets!) The text should be enclosed in the appropriate
|
||||
comment syntax for the file format. We also recommend that a
|
||||
file or class name and description of purpose be included on the
|
||||
same "printed page" as the copyright notice for easier
|
||||
identification within third-party archives.
|
||||
|
||||
Copyright [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
# roim-picx
|
||||
|
||||
### 预览地址
|
||||
[roim-picx](https://pigx.tuqu.me)
|
||||
> 该系统仅作为预览使用，每天有使用限额，请勿大量上传图片。不要使用该图床的地址作为生产使用，因为要定时删除。
|
||||
|
||||
### 一款基于Cloudflare的Worker、R2、Pages实现的图床应用，具有以下特点：
|
||||
* 10GB的免费存储空间
|
||||
* 每月300W次的不计流量的图片访问，每天10W的限制。
|
||||
* 每月100W次的图片上传次数
|
||||
* 不需要自己购买服务器，克隆代码后部署CloudFlare即可使用。
|
||||
* 独立部署不需要担心被第三方删除数据。
|
||||
|
||||
### 已实现功能
|
||||
* 图片批量上传
|
||||
* 图片列表查询
|
||||
* 图片删除
|
||||
* 目录创建
|
||||
* 按目录查询
|
||||
* 链接地址点击复制
|
||||
|
||||
### TODO
|
||||
* 简单的身份认证功能，进入管理页面需要授权
|
||||
* 上传时支持选择目录。
|
||||
* 提供删除图片的访问链接
|
||||
* 管理页面支持分页加载图片
|
||||
|
||||
### 使用教程
|
||||
|
||||
### 图床截图
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 项目参考来源
|
||||
[1. cfworker-kv-image-hosting](https://github.com/realByg/cfworker-kv-image-hosting)
|
||||
|
||||
[2. HikariSearch](https://github.com/mixmoe/HikariSearch)
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { error } from 'itty-router-extras';
|
||||
|
||||
export interface Env {
|
||||
BASE_URL: string
|
||||
XK: KVNamespace
|
||||
PICX: R2Bucket
|
||||
}
|
||||
|
||||
export const onRequest: PagesFunction<Env> = async (context : EventContext) => {
|
||||
const { router } = await import('./router').then(
|
||||
async (module) => (await import('./routes'), module)
|
||||
);
|
||||
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
|
||||
const response: Response | undefined = await router.handle(context.request, context.env);
|
||||
return response ?? error(404, 'not found');
|
||||
} catch (err) {
|
||||
return error(500, (err as Error).message);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { ThrowableRouter } from 'itty-router-extras';
|
||||
|
||||
export const router = ThrowableRouter<Request>({ base: '/rest' });
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
import { router } from '../router';
|
||||
import { Env } from '../[[path]]'
|
||||
import { json } from 'itty-router-extras';
|
||||
import { Ok, Fail, Build, ImgItem, ImgList, ImgReq, Folder } from "../type";
|
||||
import { checkFileType, getFileName, parseRange } from '../utils'
|
||||
import { R2ListOptions } from "@cloudflare/workers-types";
|
||||
|
||||
// list image
|
||||
router.post('/list', async (req : Request, env : Env) => {
|
||||
const data = await req.json() as ImgReq
|
||||
if (!data.limit) {
|
||||
data.limit = 10
|
||||
}
|
||||
if (data.limit > 100) {
|
||||
data.limit = 100
|
||||
}
|
||||
if (!data.delimiter) {
|
||||
data.delimiter = "/"
|
||||
}
|
||||
let include = undefined
|
||||
if (data.delimiter != "/") {
|
||||
include = data.delimiter
|
||||
}
|
||||
// console.log(include)
|
||||
const options = <R2ListOptions>{
|
||||
limit: data.limit,
|
||||
cursor: data.cursor,
|
||||
delimiter: data.delimiter,
|
||||
prefix: include
|
||||
}
|
||||
const list = await env.PICX.list(options)
|
||||
// console.log(list)
|
||||
const truncated = list.truncated ? list.truncated : false
|
||||
const cursor = list.cursor
|
||||
const objs = list.objects
|
||||
const urls = objs.map(it => {
|
||||
return <ImgItem> {
|
||||
url: `${env.BASE_URL}/rest/${it.key}`,
|
||||
key: it.key,
|
||||
size: it.size
|
||||
}
|
||||
})
|
||||
return json(Ok(<ImgList>{
|
||||
list: urls,
|
||||
next: truncated,
|
||||
cursor: cursor,
|
||||
prefixes: list.delimitedPrefixes
|
||||
}))
|
||||
})
|
||||
|
||||
// batch upload file
|
||||
router.post('/upload', async (req: Request, env : Env) => {
|
||||
const files = await req.formData()
|
||||
const images = files.getAll("files")
|
||||
const errs = []
|
||||
const urls = Array<ImgItem>()
|
||||
for (let item of images) {
|
||||
const fileType = item.type
|
||||
if (!checkFileType(fileType)) {
|
||||
errs.push(`${fileType} not support.`)
|
||||
continue
|
||||
}
|
||||
const time = new Date().getTime()
|
||||
const filename = await getFileName(fileType, time)
|
||||
const header = new Headers()
|
||||
header.set("content-type", fileType)
|
||||
header.set("content-length", `${item.size}`)
|
||||
const object = await env.PICX.put(filename, item.stream(), {
|
||||
httpMetadata: header,
|
||||
}) as R2Object
|
||||
if (object || object.key) {
|
||||
urls.push({
|
||||
key: object.key,
|
||||
size: object.size,
|
||||
url: `${env.BASE_URL}/rest/${object.key}`,
|
||||
filename: item.name
|
||||
})
|
||||
}
|
||||
}
|
||||
return json(Build(urls, errs.toString()))
|
||||
})
|
||||
|
||||
// 创建目录
|
||||
router.post("/folder", async (req: Request, env: Env) => {
|
||||
try {
|
||||
const data = await req.json() as Folder
|
||||
const regx = /^[A-Za-z_]+$/
|
||||
if (!regx.test(data.name)) {
|
||||
return json(Fail("Folder name error"))
|
||||
}
|
||||
await env.PICX.put(data.name + '/', "")
|
||||
return json(Ok("Success"))
|
||||
} catch (e) {
|
||||
return json(Fail("Create folder fail"))
|
||||
}
|
||||
})
|
||||
|
||||
// delete image
|
||||
router.delete("/", async (req : Request, env: Env) => {
|
||||
const params = await req.json()
|
||||
// console.log(params)
|
||||
const keys = params.keys;
|
||||
if (!keys || keys.length < 1) {
|
||||
return json(Fail("not delete keys"))
|
||||
}
|
||||
const arr = keys.split(',')
|
||||
try {
|
||||
for (let it of arr) {
|
||||
if(it && it.length) {
|
||||
await env.PICX.delete(it)
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`img delete error:${e.message}`,)
|
||||
}
|
||||
return json(Ok(keys))
|
||||
})
|
||||
|
||||
// image detail
|
||||
router.get("/:id+", async (req : Request, env : Env) => {
|
||||
let id = req.params.id
|
||||
const range = parseRange(req.headers.get('range'))
|
||||
const object = await env.PICX.get(id, {
|
||||
range,
|
||||
onlyIf: req.headers,
|
||||
})
|
||||
if (object == null) {
|
||||
return json(Fail("object not found"))
|
||||
}
|
||||
const headers = new Headers()
|
||||
object.writeHttpMetadata(headers)
|
||||
headers.set('etag', object.httpEtag)
|
||||
if (range) {
|
||||
headers.set("content-range", `bytes ${range.offset}-${range.end}/${object.size}`)
|
||||
}
|
||||
const status = object.body ? (range ? 206 : 200) : 304
|
||||
return new Response(object.body, {
|
||||
headers,
|
||||
status
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
export interface Result {
|
||||
code: number
|
||||
msg: string
|
||||
data?: any
|
||||
}
|
||||
|
||||
export interface ImgItem {
|
||||
key : string
|
||||
url : string
|
||||
size: number
|
||||
filename ?: string
|
||||
}
|
||||
|
||||
export interface ImgList {
|
||||
next: boolean
|
||||
cursor ?: string
|
||||
list : Array<ImgItem>
|
||||
prefixes ?: Array<String>
|
||||
}
|
||||
|
||||
export interface ImgReq {
|
||||
limit: number,
|
||||
cursor ?: string
|
||||
delimiter ?: string
|
||||
}
|
||||
|
||||
// 文件夹名称
|
||||
export interface Folder {
|
||||
name: string
|
||||
}
|
||||
|
||||
export function Fail(msg : string) : Result {
|
||||
return <Result> {
|
||||
code: StatusCode.ERROR,
|
||||
msg: msg,
|
||||
data: null
|
||||
}
|
||||
}
|
||||
export function Ok(data : any) : Result {
|
||||
return <Result> {
|
||||
code: StatusCode.OK,
|
||||
msg: "ok",
|
||||
data: data
|
||||
}
|
||||
}
|
||||
export function Build(data : any, msg: string) : Result {
|
||||
return <Result> {
|
||||
code: StatusCode.OK,
|
||||
msg: msg,
|
||||
data: data
|
||||
}
|
||||
}
|
||||
const StatusCode = {
|
||||
OK: 200,
|
||||
ERROR: 500
|
||||
}
|
||||
export default StatusCode
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
const supportFiles = [{type:'image/png',ext:'png'},{type:'image/jpeg',ext:'jpeg'},{type:'image/gif',ext:'gif'},{type:'image/webp',ext:'webp'},{type:'image/jpg',ext:'jpg'},{type:'image/x-icon',ext:'ico'},{type:'application/x-ico',ext:'ico'},{type:'image/vnd.microsoft.icon',ext:'ico'}]
|
||||
const supportFile = 'image/png,image/jpeg,image/gif,image/webp,image/jpg,image/x-icon,application/x-ico,image/vnd.microsoft.icon'
|
||||
|
||||
// 字符串编码
|
||||
export function randomString(value: number) {
|
||||
let baseStr = 'Aa0Bb1Cc2Dd3Ee4Ff5Gg6Hh7Ii8Jj9KkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz';
|
||||
const chars = baseStr.split('');
|
||||
let maxPos = baseStr.length;
|
||||
const uuid = [];
|
||||
let q = value;
|
||||
for(;q > 0;) {
|
||||
let mod = q % maxPos;
|
||||
q = (q - mod) / maxPos;
|
||||
uuid.push(chars[mod]);
|
||||
}
|
||||
return uuid.join('');
|
||||
}
|
||||
|
||||
// 解析range
|
||||
export function parseRange(encoded: string | null): undefined | { offset: number, end: number, length: number } {
|
||||
if (encoded === null) {
|
||||
return
|
||||
}
|
||||
const parts = encoded.split("bytes=")[1]?.split("-") ?? []
|
||||
if (parts.length !== 2) {
|
||||
throw new Error('Not supported to skip specifying the beginning/ending byte at this time')
|
||||
}
|
||||
return {
|
||||
offset: Number(parts[0]),
|
||||
end: Number(parts[1]),
|
||||
length: Number(parts[1]) + 1 - Number(parts[0]),
|
||||
}
|
||||
}
|
||||
|
||||
// 检查文件类是否支持
|
||||
export function checkFileType(val : string) : boolean {
|
||||
return supportFile.indexOf(val) > -1
|
||||
}
|
||||
|
||||
// 获取文件名
|
||||
export async function getFileName(val : string, time : number) : Promise<string> {
|
||||
const types = supportFiles.filter(it => it.type === val)
|
||||
if (!types || types.length < 1) {
|
||||
return val
|
||||
}
|
||||
const rand = Math.floor(Math.random() * 100000)
|
||||
return randomString(time + rand).concat(`.${types[0].ext}`)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Loading</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "roim-picx",
|
||||
"version": "1.0.1",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"dev:worker": "wrangler pages dev ./public --kv=XK --r2=PICX",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.1.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.1.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.1.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.0-5",
|
||||
"axios": "^0.25.0",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
"element-plus": "^2.2.23",
|
||||
"itty-router": "^3.0.11",
|
||||
"itty-router-extras": "^0.4.2",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cloudflare/workers-types": "^4.20230115.0",
|
||||
"@vitejs/plugin-vue": "^3.2.0",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"postcss": "^8.4.5",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "^4.4.4",
|
||||
"vite": "^3.2.5",
|
||||
"wrangler": "^2.9.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<div class="w-full h-screen overflow-x-hidden overflow-y-auto">
|
||||
<el-scrollbar>
|
||||
<div
|
||||
class="w-full h-16 bg-rose-100/50 shadow-sm sticky left-0 top-0 backdrop-blur-sm z-10"
|
||||
>
|
||||
<div class="mx-auto max-w-6xl px-4 h-full flex items-center">
|
||||
<img src="./assets/picx-logo.png" class="w-8 h-8 block mr-2" />
|
||||
<div class="text-lg">
|
||||
{{ appName }}
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
|
||||
<div
|
||||
:class="{
|
||||
'bg-rose-300': $route.path === '/up'
|
||||
}"
|
||||
class="px-3 py-2 rounded-md mr-2 text-gray-800 text-sm cursor-pointer"
|
||||
@click="router.push('/up')"
|
||||
>
|
||||
<font-awesome-icon :icon="faUpload" :class="[$route.path === '/up' ? 'text-white' : 'text-gray-500']" />
|
||||
<span class="hidden md:inline-block pl-2">上传</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
:class="{
|
||||
'bg-rose-300': $route.path === '/'
|
||||
}"
|
||||
class="px-3 py-2 rounded-md text-gray-800 text-sm cursor-pointer"
|
||||
@click="router.push('/')"
|
||||
>
|
||||
<font-awesome-icon :icon="faCog" :class="[$route.path === '/' ? 'text-white' : 'text-gray-500']" />
|
||||
<span class="hidden md:inline-block pl-2">管理</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-[calc(100vh-64px-64px)] overflow-auto">
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
<div class="w-full h-16 flex items-center justify-center text-gray-500 text-sm">
|
||||
<a :href="repoLink" target="_blank" class="underline">
|
||||
{{ repoName }}
|
||||
</a>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { faCog, faUpload } from '@fortawesome/free-solid-svg-icons'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElScrollbar, ElConfigProvider } from 'element-plus'
|
||||
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
const repoLink = 'https://roim.app'
|
||||
const repoName = 'roim-picx'
|
||||
const appName = 'PICX'
|
||||
|
||||
document.title = appName
|
||||
|
||||
const router = useRouter()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
@apply scroll-smooth text-base bg-gray-100 select-none overflow-x-hidden;
|
||||
}
|
||||
|
||||
.area-disabled {
|
||||
@apply !opacity-60 active:!pointer-events-none !cursor-not-allowed;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
|
|
@ -0,0 +1,108 @@
|
|||
<template>
|
||||
<div
|
||||
class="w-full bg-rose-100 rounded-md shadow-sm overflow-hidden relative"
|
||||
v-if="!imageError"
|
||||
>
|
||||
<loading-overlay :loading="loading" />
|
||||
|
||||
<el-image
|
||||
class="block w-full h-32 lg:h-60"
|
||||
:src="src"
|
||||
fit="cover"
|
||||
hide-on-click-modal
|
||||
lazy
|
||||
@error="imageError = true"
|
||||
@load="loading = false"
|
||||
:preview-src-list="[src]"
|
||||
/>
|
||||
<div class="w-full absolute left-0 bottom-0 bg-slate-800/70 backdrop-blur-sm">
|
||||
<div class="p-2">
|
||||
<div class="w-full flex items-center text-white">
|
||||
<div class="flex-1 w-full truncate">
|
||||
<el-tooltip :content="name" placement="top-start">
|
||||
{{ name }}
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-if="mode === 'converted'"
|
||||
class="w-6 h-6 flex items-center justify-center cursor-pointer"
|
||||
@click="emit('delete')"
|
||||
>
|
||||
<font-awesome-icon :icon="faTimesCircle" />
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs text-gray-300 flex items-center">
|
||||
{{ formatBytes(size) }}
|
||||
<el-divider v-if="uploadedAt" direction="vertical" />
|
||||
<span v-if="uploadedAt">
|
||||
{{ new Date(uploadedAt).toLocaleDateString() }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="mode === 'uploaded'">
|
||||
<el-divider class="m-0" />
|
||||
<div class="w-full flex text-white h-9 text-center text-sm">
|
||||
<el-tooltip :content="src" placement="top-start">
|
||||
<div
|
||||
class="flex-1 flex items-center justify-center cursor-pointer"
|
||||
@click="copyLink(src)"
|
||||
>
|
||||
<font-awesome-icon :icon="faCopy" class="mr-2" />
|
||||
链接
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" class="h-full" />
|
||||
<el-popconfirm
|
||||
title="确认删除图片吗？"
|
||||
confirm-button-type="danger"
|
||||
@confirm="
|
||||
() => {
|
||||
// (e: Event) => boolean ???
|
||||
loading = true
|
||||
emit('delete')
|
||||
return true
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #reference>
|
||||
<div class="flex-1 flex items-center justify-center cursor-pointer">
|
||||
<font-awesome-icon :icon="faTrashAlt" class="mr-2" />
|
||||
删除
|
||||
</div>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { faTimesCircle, faTrashAlt, faCopy } from '@fortawesome/free-regular-svg-icons'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import formatBytes from '../utils/format-bytes'
|
||||
import {ElTooltip, ElDivider, ElPopconfirm, ElImage, ElMessage} from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
import LoadingOverlay from '../components/LoadingOverlay.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
src: string
|
||||
name: string
|
||||
size: number
|
||||
mode: 'converted' | 'uploaded'
|
||||
uploadedAt?: number
|
||||
expiresAt?: number
|
||||
}>()
|
||||
const emit = defineEmits(['delete'])
|
||||
|
||||
const imageError = ref(false)
|
||||
const loading = ref(true)
|
||||
const copyLink = (link : string) => {
|
||||
const res = copy(link)
|
||||
if (res) {
|
||||
ElMessage.success('链接复制成功')
|
||||
} else {
|
||||
ElMessage.success('链接复制失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<el-card class="box-card mt-4" v-for="it in imageList" :key="it.key">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ it.filename }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="text item">
|
||||
<div class="lg:flex items-center justify-start">
|
||||
<el-image
|
||||
class="block w-48 h-48 lg:mr-6 mb-2 lg:mb-0 mx-auto"
|
||||
:src="it.url"
|
||||
fit="cover"
|
||||
hide-on-click-modal
|
||||
lazy
|
||||
@error="imageError = true"
|
||||
@load="loading = false"
|
||||
:preview-src-list="[it.url]"
|
||||
/>
|
||||
<div class="link-list">
|
||||
<div class="w-full mb-2">
|
||||
<label for="htmlLink" class="block text-sm font-medium text-gray-700"> HTML </label>
|
||||
<div class="mt-1">
|
||||
<input id="htmlLink" :value="htmlLink(it.url, it.filename)" name="htmlLink" class="cursor-pointer focus:node border border-gray-300 flex-1 block w-full rounded-md px-2 py-1" readonly placeholder="html link" @click="copyLink" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-2">
|
||||
<label for="Markdown" class="block text-sm font-medium text-gray-700"> Markdown </label>
|
||||
<div class="mt-1">
|
||||
<input id="Markdown" :value="markdownLink(it.url, it.filename)" name="Markdown" class="cursor-pointer focus:none border border-gray-300 flex-1 block w-full rounded-md px-2 py-1" readonly placeholder="markdown link" @click="copyLink" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full mb-2">
|
||||
<label for="LINK" class="block text-sm font-medium text-gray-700"> LINK </label>
|
||||
<div class="mt-1">
|
||||
<input id="LINK" :value="it.url" name="LINK" class="cursor-pointer focus:none border border-gray-300 flex-1 block w-full rounded-md px-2 py-1" placeholder="link" @click="copyLink" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ImgItem } from '../utils/types'
|
||||
import copy from 'copy-to-clipboard'
|
||||
import { ElCard, ElImage, ElMessage } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
const props = defineProps<{
|
||||
imageList: ImgItem[]
|
||||
}>()
|
||||
const imageError = ref(false)
|
||||
const loading = ref(false)
|
||||
const markdownLink = (link: String, filename: String) => {
|
||||
return ``
|
||||
}
|
||||
const htmlLink = (link: String, filename: String) => {
|
||||
return `<a href="${link}" target="_blank" title="${filename}"><img src="${link}"></a>`
|
||||
}
|
||||
|
||||
const copyLink = (event: any) => {
|
||||
// console.log(event.target.value)
|
||||
const res = copy(event.target.value)
|
||||
if (res) {
|
||||
ElMessage.success('链接复制成功')
|
||||
} else {
|
||||
ElMessage.success('链接复制失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.link-list {
|
||||
width: calc(100% - 13.5rem);
|
||||
}
|
||||
@media screen and (max-width: 1024px){
|
||||
.link-list {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="props.loading"
|
||||
class="backdrop-blur-sm left-0 top-0 h-full w-full absolute flex items-center justify-around z-50 cursor-not-allowed"
|
||||
>
|
||||
<font-awesome-icon :icon="faSpinner" class="text-4xl text-gray-400 animate-spin" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { faSpinner } from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
const props = defineProps<{
|
||||
loading: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<template>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="Preview" name="first">
|
||||
<image-item :image-list="imageList" ref="imageItem" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="HTML" name="second">
|
||||
<div class="text-sm text-gray-600 p-2 bg-gray-100 max-w-full overflow-auto whitespace-pre" @click="copyLink">
|
||||
{{ htmlLinks() }}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Markdown" name="third">
|
||||
<div class="text-sm text-gray-600 p-2 bg-gray-100 max-w-full overflow-auto whitespace-pre" @click="copyLink">
|
||||
{{ markdownLinks() }}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Link" name="fourth">
|
||||
<div class="text-sm text-gray-600 p-2 bg-gray-100 max-w-full overflow-auto whitespace-pre" @click="copyLink">
|
||||
{{ viewLinks() }}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElCard, ElImage, ElMessage, ElTabs, ElTabPane } from 'element-plus'
|
||||
import { ref } from 'vue'
|
||||
import type { TabsPaneContext } from 'element-plus'
|
||||
import ImageItem from '../components/ImageItem.vue'
|
||||
import type { ImgItem } from '../utils/types'
|
||||
import copy from 'copy-to-clipboard'
|
||||
const props = defineProps<{
|
||||
imageList: ImgItem[]
|
||||
}>()
|
||||
|
||||
const activeName = ref('first')
|
||||
const htmlLinks = () => {
|
||||
let text = ''
|
||||
const length = props.imageList.length
|
||||
for(let i = 0; i < length; i++) {
|
||||
const it = props.imageList[i]
|
||||
text += `<a href="${it.url}" target="_blank"><img src="${it.url}"></a>\n`
|
||||
}
|
||||
return text
|
||||
}
|
||||
const viewLinks = () => {
|
||||
let text = ''
|
||||
const length = props.imageList.length
|
||||
for(let i = 0; i < length; i++) {
|
||||
const it = props.imageList[i]
|
||||
text += `${it.url}\n`
|
||||
}
|
||||
return text
|
||||
}
|
||||
const markdownLinks = () => {
|
||||
let text = ''
|
||||
const length = props.imageList.length
|
||||
for(let i = 0; i < length; i++) {
|
||||
const it = props.imageList[i]
|
||||
text += `\n`
|
||||
}
|
||||
return text
|
||||
}
|
||||
const copyLink = (event: any) => {
|
||||
// console.log(event.target.innerText)
|
||||
const res = copy(event.target.innerText)
|
||||
if (res) {
|
||||
ElMessage.success('链接复制成功')
|
||||
} else {
|
||||
ElMessage.success('链接复制失败')
|
||||
}
|
||||
}
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
// console.log(tab, event)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-tabs > .el-tabs__content {
|
||||
padding: 32px;
|
||||
color: #6b778c;
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_APP_API_URL: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './plugins/router'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import './app.css'
|
||||
import 'element-plus/dist/index.css'
|
||||
|
||||
createApp(App).use(router).component('font-awesome-icon', FontAwesomeIcon).mount('#app')
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('../views/ManageImages.vue')
|
||||
},
|
||||
{
|
||||
path: '/up',
|
||||
component: () => import('../views/UploadImages.vue')
|
||||
},
|
||||
{
|
||||
path: '/:path(.*)',
|
||||
redirect: '/'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
const k = 1024
|
||||
const dm = 2 < 0 ? 0 : 2
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
||||
|
||||
const formatBytes = (bytes: number) => {
|
||||
if (bytes === 0) return '0 B'
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
export default formatBytes
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import axios from 'axios'
|
||||
import { ElNotification as elNotify } from 'element-plus'
|
||||
import {ImgList, ImgDel, ImgReq, Folder, ImgItem} from "./types";
|
||||
|
||||
const request = axios.create({
|
||||
baseURL: import.meta.env.VITE_APP_API_URL,
|
||||
timeout: 200000
|
||||
})
|
||||
|
||||
request.interceptors.response.use(
|
||||
(response) => response.data.data,
|
||||
(error) => {
|
||||
elNotify({
|
||||
message: error?.response?.data || String(error),
|
||||
duration: 0,
|
||||
type: 'error'
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export const requestListImages = (data : ImgReq): Promise<ImgList> => request.post('/rest/list', data)
|
||||
export const requestUploadImages = (data: FormData) : Promise<ImgItem[]> => request.post('/rest/upload', data)
|
||||
export const createFolder = (data: Folder) => request.post('/rest/folder', data)
|
||||
export const requestDeleteImage = (data: ImgDel) => request.delete('/rest', { data })
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
export type ConvertedImage = {
|
||||
file: File
|
||||
tmpSrc: string
|
||||
}
|
||||
|
||||
export type UploadedImage = {
|
||||
src: string
|
||||
size: number
|
||||
name: string
|
||||
uploadedAt: number
|
||||
expiresAt: number
|
||||
}
|
||||
|
||||
export interface ImgItem {
|
||||
key : string
|
||||
url : string
|
||||
size: number
|
||||
|
||||
filename ?: string
|
||||
}
|
||||
|
||||
export interface ImgList {
|
||||
next: boolean
|
||||
cursor ?: string
|
||||
list : Array<ImgItem>
|
||||
|
||||
prefixes ?: Array<String>
|
||||
}
|
||||
|
||||
export interface ImgDel {
|
||||
keys : string
|
||||
}
|
||||
|
||||
export interface ImgReq {
|
||||
cursor?: string
|
||||
delimiter?: string
|
||||
limit: Number
|
||||
}
|
||||
export interface Folder {
|
||||
name: string
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<template>
|
||||
<div class="mx-auto max-w-6xl my-4 px-4 relative">
|
||||
<loading-overlay :loading="loading" />
|
||||
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<div class="text-gray-800 text-lg">管理图片</div>
|
||||
<div class="text-sm text-gray-500">
|
||||
已上传 {{ uploadedImages.length }} 张图片，共 {{ formatBytes(imagesTotalSize) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-start">
|
||||
<font-awesome-icon :icon="faFolderPlus" class="text-xl cursor-pointer text-3xl text-amber-300 mr-2" @click="addFolder" />
|
||||
<font-awesome-icon
|
||||
:icon="faRedoAlt"
|
||||
class="text-xl cursor-pointer text-indigo-400"
|
||||
@click="listImages"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="my-2 flex items-center justify-start flex-wrap">
|
||||
<div v-for="it in prefixes" class="px-4 py-2 items-center flex rounded-lg bg-white shadow-md cursor-pointer mx-1" @click="changeFolder(it)">
|
||||
<font-awesome-icon :icon="faFolder" class="text-3xl text-amber-500" />
|
||||
<span v-if="it !== '/'" class="pl-2 text-gray-600"> {{ it.replace("/", "") }}</span>
|
||||
<span v-else class="pl-2 text-gray-600"> {{ it }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid gap-4 grid-cols-4">
|
||||
<transition-group name="el-fade-in-linear">
|
||||
<div
|
||||
class="col-span-3 md:col-span-1"
|
||||
v-for="item in uploadedImages"
|
||||
:key="item.url"
|
||||
>
|
||||
<image-box
|
||||
:src="item.url"
|
||||
:name="item.key"
|
||||
:size="item.size"
|
||||
@delete="deleteImage(item.key)"
|
||||
mode="uploaded"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { requestListImages, requestDeleteImage, createFolder } from '../utils/request'
|
||||
import LoadingOverlay from '../components/LoadingOverlay.vue'
|
||||
import formatBytes from '../utils/format-bytes'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import type { ImgItem, ImgReq, Folder } from '../utils/types'
|
||||
import ImageBox from '../components/ImageBox.vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { faRedoAlt, faFolder, faFolderPlus } from '@fortawesome/free-solid-svg-icons'
|
||||
import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
|
||||
|
||||
const loading = ref(false)
|
||||
const delimiter = ref('/')
|
||||
const uploadedImages = ref<ImgItem[]>([])
|
||||
const prefixes = ref<String[]>([])
|
||||
const imagesTotalSize = computed(() =>
|
||||
uploadedImages.value.reduce((total, item) => total + item.size, 0)
|
||||
)
|
||||
const changeFolder = (path : string) => {
|
||||
console.log(path)
|
||||
delimiter.value = path
|
||||
listImages()
|
||||
}
|
||||
const addFolder = () => {
|
||||
ElMessageBox.prompt('请输入目录名称，仅支持英文名称', '新增目录', {
|
||||
confirmButtonText: '创建',
|
||||
cancelButtonText: '取消',
|
||||
inputPattern: /^[A-Za-z_]+$/,
|
||||
inputErrorMessage: '无效的目录名称',
|
||||
}).then(({ value }) => {
|
||||
loading.value = true
|
||||
createFolder(<Folder> {
|
||||
name: value
|
||||
}).then((res) => {
|
||||
console.log(res)
|
||||
ElMessage.success('文件见创建成功')
|
||||
listImages()
|
||||
}).catch(() => {
|
||||
ElMessage.error('文件见创建失败')
|
||||
}).finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}).catch(() => {})
|
||||
}
|
||||
const listImages = () => {
|
||||
loading.value = true
|
||||
requestListImages(<ImgReq> {
|
||||
limit: 100,
|
||||
delimiter: delimiter.value
|
||||
}).then((data) => {
|
||||
uploadedImages.value = data.list
|
||||
if (data.prefixes && data.prefixes.length) {
|
||||
prefixes.value = data.prefixes
|
||||
if (delimiter.value !== '/') {
|
||||
prefixes.value = ['/', ...data.prefixes]
|
||||
}
|
||||
} else {
|
||||
prefixes.value = ['/']
|
||||
}
|
||||
}).catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
listImages()
|
||||
})
|
||||
|
||||
const deleteImage = (src: string) => {
|
||||
requestDeleteImage({
|
||||
keys: src
|
||||
}).then((res) => {
|
||||
uploadedImages.value = uploadedImages.value.filter((item) => item.key !== res)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
<template>
|
||||
<div class="mx-auto max-w-6xl my-4 px-4">
|
||||
<div class="text-gray-800 text-lg">上传图片</div>
|
||||
<div class="mb-4 text-sm text-gray-500">
|
||||
每张图片大小不超过 {{ formatBytes(imageSizeLimit) }}
|
||||
</div>
|
||||
|
||||
<div class="border-2 border-dashed border-slate-400 rounded-md relative">
|
||||
<loading-overlay :loading="loading" />
|
||||
|
||||
<div
|
||||
class="grid p-4 gap-4 grid-cols-4 min-h-[240px]"
|
||||
@drop.prevent="onFileDrop"
|
||||
@dragover.prevent
|
||||
>
|
||||
<div
|
||||
v-if="convertedImages.length === 0"
|
||||
class="absolute -z-10 left-0 top-0 w-full h-full flex items-center justify-center"
|
||||
>
|
||||
<div class="text-gray-500">
|
||||
<font-awesome-icon :icon="faCopy" />
|
||||
粘贴或拖动图片至此处
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<transition-group name="el-fade-in-linear">
|
||||
<div
|
||||
class="col-span-3 md:col-span-1"
|
||||
v-for="item in convertedImages"
|
||||
:key="item.tmpSrc"
|
||||
>
|
||||
<image-box
|
||||
:src="item.tmpSrc"
|
||||
:size="item.file.size"
|
||||
:name="item.file.name"
|
||||
@delete="removeImage(item.tmpSrc)"
|
||||
mode="converted"
|
||||
/>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full rounded-md shadow-sm overflow-hidden mt-4 grid grid-cols-8">
|
||||
<div class="md:col-span-1 col-span-8">
|
||||
<div
|
||||
class="w-full h-10 bg-blue-500 cursor-pointer flex items-center justify-center text-white"
|
||||
:class="{
|
||||
'area-disabled': loading
|
||||
}"
|
||||
@click="input?.click()"
|
||||
>
|
||||
<font-awesome-icon :icon="faImages" class="mr-2" />
|
||||
选择图片
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-5 col-span-8">
|
||||
<div class="w-full h-10 bg-slate-200 leading-10 px-4 text-center md:text-left">
|
||||
已选择 {{ convertedImages.length }} 张，共 {{ formatBytes(imagesTotalSize) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-1 col-span-3">
|
||||
<div
|
||||
class="w-full bg-red-500 cursor-pointer h-10 flex items-center justify-center text-white"
|
||||
:class="{
|
||||
'area-disabled': loading
|
||||
}"
|
||||
@click="clearInput"
|
||||
>
|
||||
<font-awesome-icon :icon="faTrashAlt" class="mr-2" />
|
||||
清除
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="md:col-span-1 col-span-5">
|
||||
<div
|
||||
class="w-full h-10 flex items-center justify-center text-white bg-green-500 cursor-pointer"
|
||||
:class="{
|
||||
'area-disabled': convertedImages.length === 0 || loading
|
||||
}"
|
||||
@click="uploadImages"
|
||||
>
|
||||
<font-awesome-icon :icon="faUpload" class="mr-2" />
|
||||
上传
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<result-list v-show="imgResultList && imgResultList.length" :image-list="imgResultList" ref="resultList" class="mt-4" />
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="input"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
class="hidden"
|
||||
multiple
|
||||
@change="onInputChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { faImages, faTrashAlt, faCopy } from '@fortawesome/free-regular-svg-icons'
|
||||
import { faUpload } from '@fortawesome/free-solid-svg-icons'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import LoadingOverlay from '../components/LoadingOverlay.vue'
|
||||
import formatBytes from '../utils/format-bytes'
|
||||
import {ElNotification as elNotify } from 'element-plus'
|
||||
import { requestUploadImages } from '../utils/request'
|
||||
import { useRouter } from 'vue-router'
|
||||
import ImageBox from '../components/ImageBox.vue'
|
||||
import ResultList from '../components/ResultList.vue'
|
||||
import type { ConvertedImage, ImgItem } from '../utils/types'
|
||||
const convertedImages = ref<ConvertedImage[]>([])
|
||||
const imgResultList = ref<ImgItem[]>([])
|
||||
const imagesTotalSize = computed(() =>
|
||||
convertedImages.value.reduce((total, item) => total + item.file.size, 0)
|
||||
)
|
||||
|
||||
const imageSizeLimit = 20 * 1024 * 1024
|
||||
const input = ref<HTMLInputElement>()
|
||||
const loading = ref(false)
|
||||
const router = useRouter()
|
||||
|
||||
const onInputChange = () => {
|
||||
appendConvertedImages(input.value?.files)
|
||||
}
|
||||
const onFileDrop = (e: DragEvent) => {
|
||||
appendConvertedImages(e.dataTransfer?.files)
|
||||
}
|
||||
const onPaste = (e: ClipboardEvent) => {
|
||||
appendConvertedImages(e.clipboardData?.files)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.onpaste = onPaste
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.onpaste = null
|
||||
convertedImages.value.forEach((item) => URL.revokeObjectURL(item.tmpSrc))
|
||||
})
|
||||
|
||||
const clearInput = () => {
|
||||
convertedImages.value = []
|
||||
imgResultList.value = []
|
||||
}
|
||||
|
||||
const appendConvertedImages = async (files: FileList | null | undefined) => {
|
||||
if (!files) return
|
||||
|
||||
loading.value = true
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const file = files.item(i)
|
||||
if (!file) return
|
||||
if (file.size > imageSizeLimit) {
|
||||
elNotify({
|
||||
message: `${file.name} 文件过大`,
|
||||
type: 'error'
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
if (!file.type.startsWith('image/')) {
|
||||
elNotify({
|
||||
message: `${file.name} 不是图片文件`,
|
||||
type: 'error'
|
||||
})
|
||||
continue
|
||||
}
|
||||
|
||||
convertedImages.value = [
|
||||
...convertedImages.value,
|
||||
{
|
||||
file,
|
||||
tmpSrc: URL.createObjectURL(file)
|
||||
}
|
||||
]
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const removeImage = (tmpSrc: string) => {
|
||||
convertedImages.value = convertedImages.value.filter((item) => item.tmpSrc !== tmpSrc)
|
||||
URL.revokeObjectURL(tmpSrc)
|
||||
}
|
||||
|
||||
const uploadImages = () => {
|
||||
loading.value = true
|
||||
|
||||
const formData = new FormData()
|
||||
for (let item of convertedImages.value) {
|
||||
formData.append('files', item.file)
|
||||
}
|
||||
|
||||
requestUploadImages(formData)
|
||||
.then((res) => {
|
||||
elNotify({
|
||||
title: '上传完成',
|
||||
message: `共 ${convertedImages.value.length} 张图片，${formatBytes(
|
||||
imagesTotalSize.value
|
||||
)}`,
|
||||
type: 'success'
|
||||
})
|
||||
convertedImages.value = []
|
||||
imgResultList.value = res
|
||||
// console.log(res)
|
||||
// router.push('/')
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.remove-now-btn .el-picker-panel__footer button:first-child {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
module.exports = {
|
||||
content: ['./index.html', './src/**/*.vue'],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [],
|
||||
important: true
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "esnext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
"types": [
|
||||
"@cloudflare/workers-types"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.d.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"exclude": ["functions/**/*"]
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
server: {
|
||||
port: 8990,
|
||||
host: "0.0.0.0"
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue