element-ui 업로드와 node.js 서버 multer 이미지 파일 업로드 기능 구현

1. 첫 번째 버전, 기초 버전, 직접 크로스 도메인, 에이전트 없음.프런트 엔드

  <el-upload
  class="upload-demo"
  action="http://localhost:3000/upload"
  :file-list="fileList">
  <el-button size="small" type="primary"> el-button>
  <div slot="tip" class="el-upload__tip"> jpg/png ， 500kbdiv>
el-upload>

백그라운드 express, app.js

// app.js
var uploaderRouter =  require('./routes/upload')

app.all('*',function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (req.method == 'OPTIONS') {
      res.send(200);
  }else {
      next();
  }
});

app.use('/upload', uploaderRouter);

upload.js

// routes/upload.js
var express = require('express');
var router = express.Router();
const multer = require('multer')

const storage = multer.diskStorage({
  // 
  destination(req, file, cb){
      cb(null, 'public/upload/')
  },
  //  multer ， 
  filename(req, file, cb){
      cb(null, Date.now() + file.originalname)
  }
})
const upload = multer({storage})
 router.post('/', upload.single('file'), (req, res) =>{
    //    +   
    //  app.js  uploa
     const url = 'http://localhost:3000/upload/' + req.file.filename
     res.json({url})
 })

module.exports = router;

2. 두 번째 버전은 프록시 설정을 사용해서 크로스 필드를 해결하지만 설정이 끝나면 다시 시작해야 합니다npm run dev 그렇지 않으면 404 백엔드에서 어댑터의 크로스 코드를 삭제할 수 있습니다. 다른 코드는 바꾸지 않고 전단 코드를 바꿀 수 있습니다.

   <el-upload
  class="upload-demo"
  action="/api/upload"
  :file-list="fileList">
  <el-button size="small" type="primary"> el-button>
  <div slot="tip" class="el-upload__tip"> jpg/png ， 500kbdiv>
el-upload>

웹 팩 크로스 에이전트 설정:

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      ws: false
    },

참고: 1. 다중 파일 이미지 업로드 방식:https://www.cnblogs.com/xiaoliwang/p/10190780.html