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 http

调用

import http from './api'http.get('http://localhost:3000/b', {name:'liu',age: '12'}).then(x => {console.log(x)
})
Vue.prototype.$http = httpthis.$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)//blobreader.onload = function (e) {resolve(e.target.result)//base64}})}await this.$http.fileUpload('http://localhost:3000/send').then(async res=>{var body = document.bodyconsole.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>

2021/4/4号更新
application/x-www-form-urlencoded post 请求头
使用formData传值使用 multipart/form-data 请求头传参数

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}))})

axios封装nodejs前后端实现getpost文件上传相关推荐

elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）
1.介绍本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel,都 ...
springcloud feign前后端分离实现文件上传下载
文件上传一.服务消费者Controller package com.biddingportal.controller;import com.alibaba.fastjson.JSON; import ...
前后端分离跨服务器文件上传,SpringBoot+Vue.js实现前后端分离的文件上传功能
这篇文章需要一定vue和springboot的知识,分为两个项目,一个是前端vue项目,一个是后端springboot项目. 后端项目搭建我使用的是springboot1.5.10+jdk8+ide ...
MdEditor-v3中上传照片的前后端对接（图片上传至又拍云云储存）
MdEditor-v3中上传照片的前后端对接(图片上传至又拍云云储存) 使用springboot+MdEditor-v3+又拍云实现markdown的图片上传功能需要有一定的springboot和v ...
若依前后端不分离项目上传文件或图片不能显示出来？
很多初次使用若依前后端分离的时候,容易遇到这个问题,就是在文件上传成功的时候,在前端无法正常回显.在这里给不会的朋友写一个教程. 目录 1.前提说明 2.文件回显步骤 (1)添加文件访问前缀
SSM项目/SpringBoot项目/SpringBoot+Vue前后端分离项目图片上传并查看功能实现汇总
SSM项目下的图片上传: 1.前端Js代码:用户点击"上传头像"按钮后,会执行uploadPhoto()的方法. <button type="button" ...
前后端分离之图片上传服务端处理方法
最近公司做的项目基本上都是用的前后端分离的架构进行的.在图片上传这块处理是先将图片上传到开发者服务器上,然后返回该图片在服务器上的图片地址存到数据库中.存到数据库的时候存的并不是网络地址,而是图片的相 ...
Html5+NodeJS——拖拽多个文件上传到服务器
实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用 ...
Nodejs基于express+multer的文件上传
概览图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以 ...

axios封装nodejs前后端实现getpost文件上传

axios封装nodejs前后端实现getpost文件上传相关推荐

最新文章

热门文章