axios封裝nodejs前後端實作getpost檔案上傳

後端代碼

var express = require('express')
var app = express();
var fs = require('fs')
var http = require('http').createServer(app);
var server = app.listen(8082)
var io = require('socket.io')(server);
const multiparty = require('multiparty')
const path = require('path')
const body = require('body-parser')
app.use('/public', express.static('public'));
app.use(body.json());  //body-parser 解析json格式資料
app.use(body.urlencoded({            //此項必須在 bodyParser.json 下面,為參數編碼
  extended: true
}));
app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
  res.header("Access-Control-Allow-Headers", "name,age,Origin, X-Requested-With, Content-Type, Accept, Authorization");
  next();
});

app.post('/a', (req, res) => {
  console.log(req.body)
  res.json({
    name: req.body.name,
    age: req.body.age
  })
})
app.get('/b', (req, res) => {
  console.log(req)
  res.json({
    name: req.query.name,
    age: req.query.age
  })
})
app.use('/upla',(req,res)=>{ // 接收檔案上傳
  let form = new multiparty.Form({
    uploadDir: './public' //指定上傳的檔案路徑
  });
  form.parse(req, (err, field, files) => {
    let arr = files && files.file.map(x => { // 必須這樣寫
      fs.rename(x.path, './public/' + x.originalFilename, () => {
        console.log('改名')
      })
    })
    res.end(JSON.stringify({
      ok: 200
    }))
  })
  form.on('field', (name, value) => {
    // name:字段名
    // value:值
    console.log('資料:', name, value);

  })
  //接收檔案資料
  form.on('file', (name, file) => {
    console.log('檔案:', name, file);
  })
  //表單解析完成
  form.on('close', () => {
    console.log('完成');
  })
})
app.post('/send',async (req, res) => {
  function read () {
    return new Promise((resolve, rejects) => {
      fs.readFile('./public/2020.jpg',function(err, data) {
        resolve(data)
        rejects(err)
      })
    })
  }
  let data = await  read()
  res.send(data)
})
http.listen(3000, () => {
  console.log('listening on *:3000');
});
為socket.io
io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('message', data => {
    console.log(data);
    socket.broadcast.emit('gbmsg', data)
  })
});      

前端vue加axios

axios封裝

import axios from 'axios'
const headers = {
    name: 'liu',
    age: '14'
}
const Api = function () {
    this.get = function (url, data) {
        return axios( {
            url: url,
            method: 'GET',
            params: {
                ...data
            },
            headers: {
                ...headers
            }
        } )
    }
    this.post = function (url, data) {
        return axios( {
            url: url,
            method: 'post',
            data: data,
            headers: {
                ...headers
            }
        })
    }
    this.fileUpload = function (url, data) {
        return axios( {
            url: url,
            method: 'post',
            responseType: 'blob',
            data: data
        } )
    }
}

axios.interceptors.request.use(suc => {
    console.log('req')
    return suc
}, (err) => {

})
axios.interceptors.response.use(suc => {
    console.log('req')
    return suc
},(err) => {

})
const http = new Api()
export default      

import http from './api'

http.get('http://localhost:3000/b', {name:'liu',age: '12'}).then(x => {
  console.log(x)
})
Vue.prototype.$http = http

this.$http.post('http://localhost:3000/a', data).then(x => {
      console.log(x)
    })
 如下代碼為檔案上傳

<template>
  <div id="app">
    <img :src="src" alt="12">
    <img :src="as" alt="12">
    <router-view/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      src: '',
      as: ''
    }
  },
  async created () {
    const data = {
      name: '劉勇',
      age: '12'
    }
    this.$http.post('http://localhost:3000/a', data).then(x => {
      console.log(x)
    })
  function blobToDataURI (blob) {
  return new Promise((resolve, reject) => {
      let reader = new FileReader()
      reader.readAsDataURL(blob)//blob
      reader.onload = function (e) {
          resolve(e.target.result)//base64
      }
  })
  }
 await this.$http.fileUpload('http://localhost:3000/send').then(async res=>{
  var body = document.body
  console.log(res)
 await blobToDataURI(res.data).then(reu => {
    this.src = reu
  })
  this.as = URL.createObjectURL(res.data)
  console.log(res.data)
  console.log(URL.createObjectURL(res.data))
  var a = document.createElement('a')
  a.setAttribute('href', URL.createObjectURL(res.data))
  body.appendChild(a)
  a.setAttribute('download','1.jpg')
  a.click()
  a.removeChild('a')
})
  }
}
</script>      

let form1 = new FormData()
          form1.append('user',this.form.user)
          form1.append('pass',this.form.user)
          this.$http('post','http://localhost:3000/upla',form1).then(res=>{
            console.log(res)
          })      

var express = require('express')
var app = express();
var fs = require('fs')
const multiparty = require('multiparty')
const path = require('path')
const body = require('body-parser')

app.use(body.json());  //body-parser 解析json格式資料
app.use(body.urlencoded({            //此項必須在 bodyParser.json 下面,為參數編碼
  extended: true
}));
let form = new multiparty.Form()
  let arr = []
  form.parse(req,(err,field,files)=>{
    
  })
  
  form.on('field', (name, value) => {
    // name:字段名
    // value:值
    console.log('資料:', name, value);
    arr.push({name:value})
  })

  //接收檔案資料
  form.on('file', (name, file) => {
    console.log('檔案:', name, file);
  })
  //表單解析完成
  form.on('close', () => {
    console.log('完成');
    res.end(JSON.stringify({ok:arr}))
  })