const Koa = require('koa');
const Router = require('@koa/router');

const app = new Koa();
const router = new Router();
// 獲取列表的路由接口
router.get('/api/list', (ctx, next) => {
  // 獲取列表的邏輯
});
// 上傳圖片的路由接口
router.post('/api/upload', (ctx, next) => {
  // 上傳圖片的邏輯
});

app
  .use(router.routes())
  .use(router.allowedMethods());復(fù)制代碼

import glob from 'glob'
// 讀取文件
router.get('/api/v0/files',
    ctx => {
        const files = glob.sync(`${staticPath}/uploads/*`)
        const result = files.map(item => {
            return `${config.staticPath}${item.split('public')[1]}`
        })
        
        ctx.body = {
            state: 200,
            result
        }
    }
);復(fù)制代碼

import cors from 'koa2-cors'
// 設(shè)置跨域
app.use(cors({
    origin: function (ctx) {
        console.log(111, ctx.url)
        if (ctx.url.indexOf('/api/v0') > -1) {
            return "*"; // 允許來自所有域名請求
        }
        return 'http://qutanqianduan.com'; // 這樣就能只允許 http://qutanqianduan.com 這個域名的請求了
    },
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],  // 獲取額外的header信息
    maxAge: 5,  //  該字段可選，用來指定本次預(yù)檢請求的有效期，單位為秒
    credentials: true,
    allowMethods: ['GET', 'POST', 'DELETE'],  // 請求允許的方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'x-requested-with'] // 允許的header字段名
}))復(fù)制代碼

import multer from '@koa/multer'
import { resolve } from 'path'
import fs from 'fs'

const rootImages = resolve(__dirname, '../../public/uploads')
//上傳文件存放路徑、及文件命名
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, rootImages)
    },
    filename: function (req, file, cb) {
        let [name, type] = file.originalname.split('.');
        cb(null, `${name}_${Date.now().toString(16)}.${type}`)
    }
})
//文件上傳限制
const limits = {
    fields: 10,//非文件字段的數(shù)量
    fileSize: 1024 * 1024 * 2,//文件大小 單位 b
    files: 1//文件數(shù)量
}

export const復(fù)制代碼

// lib/upload.js
// 為了捕獲multer的錯誤
export const uploadSingleCatchError = async (ctx, next) => {
    let err = await upload.single('file')(ctx, next).then(res => res)
                .catch(err => err);
    if(err) {
        ctx.status = 500
        ctx.body = {
            state: 500,
            msg: err.message
        }
    }
}

// index.js
// 上傳文件
router.post('/api/v0/upload', uploadSingleCatchError,
    ctx => {
        let { filename, path, size } = ctx.file;
        let { source } = ctx.request.body || 'unknow';

        let url = `${config.staticPath}${path.split('/public')[1]}`
        
        ctx.body = {
            state: 200,
            filename,
            url,
            source,
            size
        }
    }
  );復(fù)制代碼

// lib/upload.js
// 刪除文件
export const delFile = (path) => {
    return new Promise((resolve, reject) => {
        fs.unlink(path, (err) => {
            if(err) {
                reject(err)
            }else {
                resolve(null)
            }
        })
    })
}// 刪除文件接口
  router.get('/api/v0/del',
    async ctx => {
        const { id } = ctx.query
        if(id) {
            const err = await delFile(`${staticPath}/uploads/${id}`)
            if(!err) {
                ctx.body = {
                    state: 200,
                    result: '刪除成功'
                }
            }else {
                ctx.code = 500
                ctx.body = {
                    state: 500,
                    result: '文件不存在，刪除失敗'
                }
            }
        }else500            ctx.body = {
                state: 500,
                result: 'id不能為空'
            }
        }
    }
  )復(fù)制代碼

import React, { Component } from 'react'
import {
  Notification,
  message,
  Layout,
  Icon
} from '@alex_xu/xui'
const復(fù)制代碼

class UploadPage extends Component {
    state = {
      fileList: []
    }

    componentDidMount() {
      fetch(apiUrl + '/files').then(res => res.json()).then(res => {
        this.setState({
          fileList: res.result
        })
      })
    }

    showAddress = (item) => {
      Notification.config({
        placement: 'topRight',
      })
      Notification.pop({
        type: 'success',
        message: '圖片地址',
        duration: 10,
        description: item
      })
    }

    render() {
      return (
        <div className="upload-wrap">
          <Layout>
            <Header fixed>
              <div className="logo"><Icon type="FaBattleNet" style={{fontSize: '30px', marginRight: '12px'}} />XOSS</div>
            </Header>
            <Content style={{marginTop: '48px', backgroundColor: '#f0f2f5'}}>
              {
                this.state.fileList.map((item, i) => {
                  return <div key={i} className="imgBox" notallow={this.showAddress.bind(this, item)}>
                    <img src={item} alt=""/>
                    <span className="del-btn" notallow={this.delFile.bind(this, item)}><Icon type="FaMinusCircle" style={{fontSize: '24px'}} /></span>
                  </div>
                })
              }
            </Content>
            <Footer style={{color: 'rgba(0,0,0, .5)'}}>趣談前端 -- 徐小夕</Footer>
          </Layout>
        </div>
      )
    }
}

export default UploadPage復(fù)制代碼