React +koa uploads images

1. Koa back-end operation

1. Install koA-body

npm install koa-body --save
Copy the code

The koa-body configuration is then performed

Since koA-BodyParser was previously installed, koA-body contains the parsed part of koA-BodyParser, and there is no need to install KoA-multer. If koA-BodyParser is not commented out, A server error BadRequestError: Request aborted error occurs when the front end calls another request interface

App.js is configured as follows

const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const serve = require("koa-static");
const logger = require('koa-logger')
const cors = require("koa2-cors");
const koaBody = require("koa-body");
const index = require('./routes/index')
const users = require('./routes/users')
const publics = require("./routes/publics");
const path = require("path"); 
// error handler
onerror(app)
// 1. Static resource service: specifies the root directory for external access
app.use(serve(path.join(__dirname, '/public')));

// middlewares
/ * app. Use (bodyparser ({- commented this middleware enableTypes: [' json ', 'form', 'text']})) * /
app.use(
  koaBody({
    enableTypes: ["json"."form"."text"].multipart: true.strict: false.formidable: {
      maxFileSize: 5 * 1024 * 1024.// set the maximum file size to 5M by default
      uploadDir: path.join(__dirname, "public/upload/"), // Set the directory for uploading files
      keepExtensions: true.// Keep the file extension}})); app.use(json()) app.use(logger()) app.use(require('koa-static')(__dirname + '/public'))

app.use(views(__dirname + '/views', {
  extension: 'pug'
}))
// logger
app.use(async (ctx, next) => {
  const start = new Date(a)await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)})// Allow cross-domain
app.use(cors())
// routes
app.use(index.routes(), index.allowedMethods())
app.use(users.routes(), users.allowedMethods())
app.use(publics.routes(), publics.allowedMethods())
// error-handling
app.on('error'.(err, ctx) = > {
  console.error('server error', err, ctx)
});

module.exports = app
Copy the code

2. Koa back-end upload interface

const path = require("path"); // Image path
class PublicControler {
  static async uplod(ctx) {
    const file = ctx.request.files.file
    const basename = path.basename(file.path)
    const size = (file.size/1024) /1024-- Picture sizetry{
       ctx.response.status = 200;
       if(size>5){
          ctx.body = {
             code: 201.message: "Image uploaded over 5M"}; }else{
         ctx.body = {
           code: 200.data: {
             path: file.path, -- returns the local file pathurl: `${ctx.origin}/public/upload/${basename}`Return ctx.origin (current domain name)},message: "Picture uploaded successfully"}; }}catch(error){
       ctx.response.status = 500;
       ctx.body = {
         code: 500.message: "Upload error"}; }}}module.exports = PublicControler;
Copy the code

Since multiple file uploads are enabled by default, ctx.request.files is an object,

The name=photo attribute of the form is used as the key of the object, and the value is a File object with the following useful fields:

3. Configuration of koA-body

1) Basic parameters of KOA-body

2) Configuration parameters of formidable

React front-end calls

 <Upload
     name="file"
     action={`The ${this.api.login.uplod}`} -- upload address beforeUpload={this.beforeUpload}
     className="uplod"
     showUploadList={false} -- do not display list ><Button icon="upload">To upload pictures</Button>
     </Upload>
Copy the code

Interface call

 beforeUpload = (e) = > {
    const size = (e.size/1024) /1024
    if(e.type ! ="image/png"&& e.type ! ="image/jpeg"&&e.type! ="image/jpg") {
      message.warning("Wrong format");
      return false;
    }else{
      const formData = new FormData();  --用表单形式上传
      formData.append("file", e);
      if(size>5){
        message.warning('Picture uploaded over 5M, please re-upload');
      }else{
        this.post(`The ${this.api.login.uplod}`, formData)
          .then((res) = > {
            if (res.code == 200) {
              message.success(res.message);
              this.setState({
                imgUrl: res.data.path,
              });
            } else {
              message.warning(res.message);
            }
          })
          .catch((res) = >{ message.warning(res.message); }); }}};Copy the code