Optimize code

src/index.js

@@ -40,46 +40,54 @@ const pass='123'//默认登录密码
  res.redirect('/index.html')
  })
 
+
+ let header=new Headers()
+ header.set('access-control-allow-origin', '*')
  //上传api
 router.post(
  '/api', async ({req,res})=> {
  let form=req.body.formData()
- let out=[]
- let img=(await form).getAll('img')
+ let img=(await form).get('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)) {
+  if (img_check.test(img.name)) {
+
  let url=await randomString()
  let check=await LINK.get(url)
  if (check!==null) {
  url=await randomString()
  }
- let stream=img[i].stream()
+ let stream=img.stream()
  await LINK.put(url,stream,{
  metadata:{
- size:img[i].size,
+ size:img.size,
  name:url,
- type:img[i].type,
+ type:img.type,
  date:new Date().getTime()
  }
  })
- out.push(req.url+'/img/'+url)
- }else{
+ res.headers=header
+ res.body={
+ link: req.url+'/img/'+url
+ }
+ }
+ else{
  res.status=400
- out='非图片文件'
- break
+ res.headers=header
+ res.body={
+ info:'非图片文件404'
+ }
  }
- }
- 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.headers=header
  res.type=metadata.type
  res.body=body
 

static/src/index.vue

@@ -9,7 +9,6 @@ export default{
  data(){
  return{
  file_info:[],
- img_link:[],
  status:false,
  over_page:false,
  powerby:true,
@@ -57,93 +56,84 @@ export default{
  file(){
  let file_id=this.$refs.inp
  this.powerby=false
- let form=new FormData()
  const that=this
-
- for (let i = 0; i < file_id.files.length; i++) {
- let reader = new FileReader();
- 
- reader.onload=(e)=> {
- form.append('img',file_id.files[i])
- this.status=true
- return this.file_info.push({
- name:file_id.files[i].name,
- src:e.target.result
- })
- }
- if (file_id.files) {
- reader.readAsDataURL(file_id.files[i])
- }
- }
- setTimeout(()=>{
- let UploadObj={
+ let uplist=[]
+ ////////
+ async function up(file) {
+ let f=new FormData()
+ f.append('img',file)
+ let UploadObj={
  method:'post',
  url:'/api',
- data:form
+ data:f
  }
- axios(UploadObj).then(async e=>{
- let restojson=e.data;
- for (let i = 0; i < restojson.src.length; i++) {
- that.img_link.push(restojson.src[i])
+ return axios(UploadObj)
+ }
+ ////
+
+ for (let i = 0; i < file_id.files.length; i++) {
+ if (file_id.files[i].size>26214400) {
+ mdui.alert('文件大于25MB')
+ that.status=false
+ continue
+ }
+ uplist.push(up(file_id.files[i]))
+ that.status=true
  }
+ Promise.all(uplist).then(res=>{
+ for (let i = 0; i < uplist.length; i++) {
+ console.log(res.data);
+ that.file_info.push({
+ link:res[i].data.link
+ }) 
+ }
+ that.status=false
+ }).catch(err=>{
+ mdui.alert(err.response.data.link)
  return that.status=false
- }).catch(async err=>{
- let info=err.response.data
- console.log(info);
- that.file_info=[]
- alert(info.src)
- return that.status=false
- }) 
-},600)
- 
+ })
  },
  drop_upload(files){
  let file_id=files.dataTransfer.files
  this.powerby=false
  const that=this
  this.over_page=false
- let form=new FormData()
-
- for (let i = 0; i < file_id.length; i++) {
- let reader = new FileReader();
- 
- reader.onload=(e)=> {
- form.append('img',file_id[i])
- this.status=true
- return this.file_info.push({
- name:file_id[i].name,
- src:e.target.result
- })
- }
- if (file_id) {
- reader.readAsDataURL(file_id[i])
- }
- }
- 
-setTimeout(()=>{
- let UploadObj={
+ let uplist=[]
+ ////////
+ async function up(file) {
+ let f=new FormData()
+ f.append('img',file)
+ let UploadObj={
  method:'post',
  url:'/api',
- data:form
+ data:f
  }
- axios(UploadObj).then(async e=>{
- let restojson=e.data;
- 
- for (let i = 0; i < restojson.src.length; i++) {
- that.img_link.push(restojson.src[i])
+ return axios(UploadObj)
+ }
+ ////
+
+ for (let i = 0; i < file_id.length; i++) {
+ if (file_id[i].size>26214400) {
+ mdui.alert('文件大于25MB')
+ continue
+ }
+ that.status=true
+ uplist.push(up(file_id[i]))
  }
+ Promise.all(uplist).then(res=>{
+ for (let i = 0; i < uplist.length; i++) {
+ that.file_info.push({
+ link:res[i].data.link
+ }) 
+ }
+ return that.status=false
+ }).catch(err=>{
+ mdui.alert(err.response.data.link)
  return that.status=false
- }).catch(async err=>{
- let info=err.response.data
- console.log(info);
- that.file_info=[]
- alert(info.src)
- return that.status=false
- }) 
-},600)
+ })
  },
  doCopy(e) {
- this.$copyText(this.img_link[e]).then(()=>{
+ this.$copyText(this.file_info[e].link).then(()=>{
  mdui.alert('复制成功')
  },()=>{
  mdui.alert('上传中...')
@@ -183,7 +173,7 @@ setTimeout(()=>{
  <template #item="{ item, url, index }">
  <div class="mdui-card">
  <div class="mdui-card-media">
- <LazyImg :url="url" @click="display($event.target)" />
+ <LazyImg :url="item.link" @click="display($event.target)" />
  <div class="mdui-card-media-covered">
  <div class="mdui-card-primary">
  <div class="mdui-card-primary-title">第{{index}}张</div>

wrangler.toml

@@ -3,7 +3,7 @@ main = "./src/index.js"
 compatibility_date = "2022-11-08"
 
 kv_namespaces = [
- { binding = "LINK", id = "7cf78afe01b9471f925d76de765d332f",preview_id='7cf78afe01b9471f925d76de765d332f'}
+ { binding = "LINK", id = "d7d86f2a1a2a4094a7f26945d6871e29",preview_id='d7d86f2a1a2a4094a7f26945d6871e29'}
 ]
 [site]
 bucket = "./static/dist"