update

README.md

@@ -1,6 +1,10 @@
 ### MJJ最爱，基于cloudflare workers数据存储于KV的图床
 
 ------------
+#### UPDATE LOG
+##### - 新增图片预览
+##### - 弃用fetch改用axios
+##### - 重新整理了下变量命名(之前太乱了 :poop: :poop: )
 
 #### 方便实用，只需要更改wrangler.toml绑定的kv_id即可使用
 #### 超级超级超级简单的Material 风(就一个按钮😂😂😂)

src/index.js

@@ -10,7 +10,7 @@ const pass='123'//默认登录密码
 */
 
  const router = new Router();
- async function randomString(len) {
+ async function randomString(len) { //随机链接生成
  　　len = len || 6;
  　　let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  　　let maxPos = $chars.length;
@@ -21,77 +21,34 @@ const pass='123'//默认登录密码
  　　return result;
  }
 
-
+ //静态资源路由
  addEventListener("fetch", async (event) => {
  let pathname = new URL(event.request.url)
  let asset= new RegExp('/assets/.*','i')
  let index=new RegExp('/index.*','i')
  let list=new RegExp('/list.*','i')
- if (asset.test(pathname.pathname)||index.test(pathname.pathname)) {
+ if (asset.test(pathname.pathname)||index.test(pathname.pathname)||list.test(pathname.pathname)) {
  event.respondWith(handleEvent(event));
  }
- if (list.test(pathname.pathname)) {
- event.respondWith(handleEvent(event));
- } 
  });
 
  async function handleEvent(event) {
- let pathname = new URL(event.request.url)
- console.log('path is '+pathname);
  return getAssetFromKV(event)
  }
- async function listhandle(request) {
- const has=request.request.headers.has('Authorization')
- if (has) {
- const { user, pass } = await basicAuthentication(request);
- if (u === user && p===pass) {
- return getAssetFromKV(request)
- }
- }
-
- // Not authenticated.
- return new Response('You need to login.', {
- status: 401,
- headers: {
- // Prompts the user for credentials.
- 'WWW-Authenticate': 'Basic realm="my scope", charset="UTF-8"',
- },
- });
- }
-
- function basicAuthentication(request) {
- const Authorization = request.request.headers.get('Authorization');
-
- const [scheme, encoded] = Authorization.split(' ');
-
- if (!encoded || scheme !== 'Basic') {
- throw new BadRequestException('Malformed authorization header.');
- }
-
- const buffer = Uint8Array.from(atob(encoded), character => character.charCodeAt(0));
- const decoded = new TextDecoder().decode(buffer).normalize();
- const index = decoded.indexOf(':');
-
- if (index === -1 || /[\0-\x1F\x7F]/.test(decoded)) {
- throw new BadRequestException('Invalid authorization value.');
- }
-
- return {
- user: decoded.substring(0, index),
- pass: decoded.substring(index + 1),
- };
- }
-
+//首页跳转
  router.get('/',({res})=>{
  res.redirect('/index.html')
  })
 
+ //上传api
 router.post(
  '/api', async ({req,res})=> {
  let form=req.body.formData()
  let out=[]
  let img=(await form).getAll('img')
  const img_check=new RegExp("(.*?)\.(png|jpe?g|gif|bmp|psd|tiff|tga|webp)","i")
+
+ //文件格式验证
  for (let i = 0; i < img.length; i++) {
  if (img_check.test(img[i].name)) {
  let url=await randomString()
@@ -118,23 +75,17 @@ router.post(
  res.body={src:out}
  }
  );
+
+ //获取图片
  router.get('/api/img/:p', async ({req,res})=>{
  let body=await LINK.get(req.params.p,{cacheTtl:864000,type:"stream"})
  const { metadata } = await LINK.getWithMetadata(req.params.p);
  res.type=metadata.type
  res.body=body
 
  }) 
- // Favicon route for fun :)
- router.get('/favicon.ico', ({ res }) => {
- res.type = 'image/svg+xml';
- res.body = `
- <svg xmlns="http:https://www.w3.org/2000/svg" baseProfile="full" width="200" height="200">
- <rect width="100%" height="100%" fill="#F38020"/>
- <text font-size="120" font-family="Arial, Helvetica, sans-serif" text-anchor="end" fill="#FFF" x="185" y="185">W</text>
- </svg>`;
- });
-
+
+ //简易登陆验证
  router.get('/query',async ({req,res})=>{
  const paramas=req.url.searchParams
  if (paramas.get('pass')==pass) {

static/package.json

@@ -9,6 +9,7 @@
  "preview": "vite preview"
  },
  "dependencies": {
+ "axios": "^1.2.2",
  "vue": "^3.2.41",
  "vue-clipboard2": "^0.3.3",
  "vue-loading-overlay": "6.0",