node 로 컬 서버 그림 업로드 방법 예시

자신 이 간단 한 배경 관리 시스템 을 만 들 때 node 를 로 컬 데이터 베 이 스 를 사용 한 다음 에 Element-ui 의 upload 구성 요소 로 그림 의 업 로드 를 실 현 했 습 니 다.중간 에 작은 구 덩이 를 만 났 습 니 다.여기 서 기록 한 것 은 파일 의 이름 에 빈 칸 이 없 는 지 모 르 고 오래 고 쳤 습 니 다.
1.index.vue 파일
여기 서 간단하게 그래 픽 인터페이스 프레임 워 크 Element-ui 의 업로드 구성 요 소 를 사용 합 니 다.그리고 action 은 서버 의 주소 입 니 다.저 는 프 록 시 를 사 용 했 습 니 다.localhost:8080 프 록 시 를 서버 의 주소 로 사용 하면 됩 니 다.

<template>
  <div class="avatar">
   <img
    :src="avatar?avatar:defaultImg"
   />
  </div>
  <el-upload
   class="upload-demo"
   drag
   action="http://localhost:8080/api/upload"
   :show-file-list="false"
   :on-success="uploadImgSuccess"
  >
   <i class="el-icon-upload"></i>
   <div class="el-upload__text">       ， <em>    </em></div>
  </el-upload>
</template>
<script>
import defaultImg from '@/assets/img/avatar.png'
export default{
  data() {
    return {
      avatar: ''
    }
  },
  methods: {
    uploadImgSuccess(res) {
      this.avatar = res.result.url;
    }
  }
}
</script>

2.프 록 시 파일
저 는 vue-cli 3 비 계 를 사용 하여 만 든 프로젝트 입 니 다.그래서 프로젝트 의 루트 디 렉 터 리 에 vue.config.js 를 만들어 서 설정 을 합 니 다.

module.exports = {
 devServer: {
  port: 8080,
  headers: {
  },
  inline: true,
  overlay: true,
  stats: 'errors-only',
  proxy: {
   '/api': {
    target: 'http://127.0.0.1:3000',
    changeOrigin: true //     
   }
  }
 },
};

3.node 서버 쪽 파일
여기 서 중요 한 것 은 정적 자원 디 렉 터 리 를 설정 하 는 것 입 니 다.

app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

사진 업로드 방법 에 대한 봉인

const fs = require('fs');
const path = require('path');
/* formidable        ，        */
const formidable = require('formidable');
/*         */
const formatTime = require('silly-datetime');

/*      */
module.exports = (req, res) => {
 /*        */
 let form = new formidable.IncomingForm();
 /*        */
 form.encoding = 'utf-8';
 /*       (          ) */
 form.uploadDir = path.join(__dirname, '../serverImage');
 /*         */
 form.keepExtensions = true;
 /*        */
 form.maxFieldsSize = 2 * 1024 *1024;

 /*    form   */
 form.parse(req, (err, fields, files) => {
  let file = files.file;
  /*     ，    */
  if(err) {
   return res.send({'status': 500, msg: '       ', result: ''});
  }

  if(file.size > form.maxFieldsSize) {
   fs.unlink(file.path);
   return res.send({'status': -1, 'msg': '      2M', result: ''});
  }

  /*       */
  let extName = '';

  switch (file.type) {
   case 'image/png':
    extName = 'png';
    break;
   case 'image/x-png':
    extName = 'png';
    break;
   case 'image/jpg':
    extName = 'jpg';
    break;
   case 'image/jpeg':
    extName = 'jpg';
    break;
  }
  if(extName.length == 0) {
   return res.send({'status': -1, 'msg': '   jpg png    ', result: ''});
  }

  /*         */
  let time = formatTime.format(new Date(), 'YYYYMMDDHHmmss');
  let num = Math.floor(Math.random() * 8999 + 10000);
  let imageName = `${time}_${num}.${extName}`;
  let newPath = form.uploadDir + '/' + imageName;

  /*         */
  fs.rename(file.path, newPath, (err) => {
   if(err) {
    return res.send({'status': -1, 'msg': '      ', result: ''});
   } else {
    return res.send({'status': 200, 'msg': '      ', result: {url: `http://localhost:3000/serverImage/${imageName}`}});
   }
  })
 })
};

방법의 호출

const express = require('express');
const router = express.Router();
const uploadImg = require('./uploadImg');

/*      */
router.post('/upload', (req, res) => {
 uploadImg(req, res);
});

module.exports = router;

서버 엔 드 입구 파일

const express = require('express');
const app = express();
const path = require('path');
/* body-parser   HTTP         
 *           JSON、Raw、  、URL-encoded      
 * */
const bodyParser = require("body-parser");

const dataBaseOperate = require('./database/operate');

/*  application/json       */
app.use(bodyParser.json());
/*  application/x-www-form-urlencoded       */
app.use(bodyParser.urlencoded({ extended: false }));

/*          */
app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

app.use('/api', dataBaseOperate);


app.listen(3000, () => {
 console.log('server is listening to http://localhost:3000')
});

4.소결
인터페이스 파일 의 반환 에 대해 서 는 body-parser 라 는 미들웨어 를 사용 하여 node 가 돌아 온 body 를 json 형식 으로 분석 합 니 다.
중요 한 것 은 정적 자원 디 렉 터 리 를 설정 하 는 것 입 니 다.그렇지 않 으 면 오류 가 발생 하여 파일 이나 폴 더 를 찾 을 수 없습니다.
정적 자원 디 렉 터 리 를 설정 하여 서버 쪽 의 정적 자원 파일 을 저장 합 니 다.

app.use('/serverImage', express.static(path.join(__dirname, 'serverImage')));

그리고 파일 이름 에 빈 칸 이 생기 면 안 됩 니 다.
파일 의 링크 는 로 컬 서버 의 url 주 소 를 사용 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.