Slog47_支配vue框架初阶项目之博客网站-单页-服务端接收客户端发来的图片

news/2024/4/27 14:28:30/文章来源:https://blog.csdn.net/weixin_34015860/article/details/88749713

ArthurSlog
SLog-47
Year·1
Guangzhou·China
Aug 24th 2018

GitHub
掘金主页
简书主页
segmentfault

房价太高了大部分人买不起怎么？降房价;工资太低了怎么办？提工资;区分人才和蠢材，回答这两个问题就够了

开发环境MacOS(High Sierra 10.13.5)

需要的信息和信息源：

HTTP概述
HTTP
互联网是如何工作的
万维网是如何工作的
统一资源定位符(URL)
什么是超链接
创建超链接
AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML
XMLHttpRequest
Using files from web applications

开始编码

本篇实现服务端对图片的接收
上一篇文章，已经完成了客户端部分，html文件和 js文件都已经完成了；服务端只是做了一个功能来检测客户端是否传来信息
这一篇文章，我们来完成服务端对客户端传过来的图片的接收功能

server/index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router();// $ GET /package.json
app.use(serve('../client'));//
router.get('/signin', async (ctx) => {var mysql = require('mysql');var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '88888888',database: 'my_db'});connection.connect(function (err) {if (err) {console.error('error connecting: ' + err.stack);return;}console.log('connected as id ' + connection.threadId);});var response = {"name": ctx.query.name,"password": ctx.query.password};var addSql = 'SELECT * FROM ArthurSlogAccount WHERE AccountName=?';var addSqlParams = [response.name];var datas = await new Promise((resolve, reject) => {connection.query(addSql, addSqlParams, function (err, result) {if (err) {reject(err);console.log('[SELECT ERROR] - ', err.message);return;}if (result[0].Password == response.password) {resolve(result[0]);console.log('Welcome~ SingIn Successul ^_^' + '\\' + 'Level: ' + result[0].Level + ' Houses: ' + result[0].Houses);}if (result[0].Password != response.password) {reject('SingIn Fault ^_^!');console.log('SingIn Fault ^_^!');}});});if (datas) {ctx.body = datas;}connection.end();
});//
router.get('/signup', async (ctx) => {var mysql = require('mysql');var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '88888888',database: 'my_db'});connection.connect(function (err) {if (err) {console.error('error connecting: ' + err.stack);return;}console.log('connected as id ' + connection.threadId);});var response = {"name": ctx.query.name,"password": ctx.query.password,"firstname": ctx.query.firstname,"lastname": ctx.query.lastname,"birthday": ctx.query.birthday,"sex": ctx.query.sex,"age": ctx.query.age,"wechart": ctx.query.wechart,"qq": ctx.query.qq,"email": ctx.query.email,"contury": ctx.query.contury,"address": ctx.query.address,"phone": ctx.query.phone,"websize": ctx.query.websize,"github": ctx.query.github,"bio": ctx.query.bio};var addSql = 'INSERT INTO ArthurSlogAccount(AccountName, Password, Firstname, Lastname, Birthday, Sex, Age, Wechart, Qq, Email, Contury, Address, Phone, Websize, Github, Bio) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)';var addSqlParams = [response.name, response.password, response.firstname, response.lastname, response.birthday, response.sex, response.age, response.wechart, response.qq, response.email, response.contury, response.address, response.phone, response.websize, response.github, response.bio];ctx.body = await new Promise((resolve, reject) => {connection.query(addSql, addSqlParams, function (err, result) {if (err) {reject(err);console.log('[INSERT ERROR] - ', err.message);return;}resolve('Singup Successful!');});});connection.end();
});router.post('/uploadfiles', async (ctx) => {console.log('客户端与服务端的 uploadfiles函数 已关联');});app.use(router.routes());app.listen(3000);console.log('listening on port 3000');

server/index.js

router.post('/uploadfiles', async (ctx) => {console.log('客户端与服务端的 uploadfiles函数 已关联');});

上面的是上一篇更新的代码，我们把上次更新的部分在更新一次

server/index.js

router.post('/uploadfiles', koaBody({multipart: true}), async (ctx) => {console.log('fields: ', ctx.request.fields);console.log('files: ', ctx.request.files);const file = ctx.request.files.myFile;const reader = fs.createReadStream(file.path);const stream = fs.createWriteStream('ArthurSlog_icon' + '.jpg');reader.pipe(stream);
});

同时，因为我们使用了系统IO（input/output）功能、还有对POST数据的解析功能（POST相当于是一些二进制数据，需要根据POST协议进行翻译成字符信息），所以我们需要引用这些功能的代码集：

首先，我们需要接收数据，并写入到服务器本地，所以需要引用关于IO的代码集，在nodejs语言中，这个代码集是 ‘fs’，所以在 js文件里，需要写上 const fs = require("fs");
再次，我们需要对POST数据进行解析，通过google，在npm里找到koa-body这个代码集，可以用来解析POST数据，所以我们引入koa-body，即：const koaBody = require('koa-body');
因为 koa-body 是第三方代码集，没有包含在nodejs执行文件里，所以，我们需要切换至 server文件夹路径下，然后使用npm安装 koa-body

cd server
sudo npm install koa-body

更新好的 js文件如下：

server/index.js

const serve = require('koa-static');
const Koa = require('koa');
const app = new Koa();
const Router = require('koa-router');
const router = new Router();
const fs = require("fs");
const koaBody = require('koa-body');// $ GET /package.json
app.use(serve('../client'));//
router.get('/signin', async (ctx) => {var mysql = require('mysql');var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '88888888',database: 'my_db'});connection.connect(function (err) {if (err) {console.error('error connecting: ' + err.stack);return;}console.log('connected as id ' + connection.threadId);});var response = {"name": ctx.query.name,"password": ctx.query.password};var addSql = 'SELECT * FROM ArthurSlogAccount WHERE AccountName=?';var addSqlParams = [response.name];var datas = await new Promise((resolve, reject) => {connection.query(addSql, addSqlParams, function (err, result) {if (err) {reject(err);console.log('[SELECT ERROR] - ', err.message);return;}if (result[0].Password == response.password) {resolve(result[0]);console.log('Welcome~ SingIn Successul ^_^' + '\\' + 'Level: ' + result[0].Level + ' Houses: ' + result[0].Houses);}if (result[0].Password != response.password) {reject('SingIn Fault ^_^!');console.log('SingIn Fault ^_^!');}});});if (datas) {ctx.body = datas;}connection.end();
});//
router.get('/signup', async (ctx) => {var mysql = require('mysql');var connection = mysql.createConnection({host: 'localhost',user: 'root',password: '88888888',database: 'my_db'});connection.connect(function (err) {if (err) {console.error('error connecting: ' + err.stack);return;}console.log('connected as id ' + connection.threadId);});var response = {"name": ctx.query.name,"password": ctx.query.password,"firstname": ctx.query.firstname,"lastname": ctx.query.lastname,"birthday": ctx.query.birthday,"sex": ctx.query.sex,"age": ctx.query.age,"wechart": ctx.query.wechart,"qq": ctx.query.qq,"email": ctx.query.email,"contury": ctx.query.contury,"address": ctx.query.address,"phone": ctx.query.phone,"websize": ctx.query.websize,"github": ctx.query.github,"bio": ctx.query.bio};var addSql = 'INSERT INTO ArthurSlogAccount(AccountName, Password, Firstname, Lastname, Birthday, Sex, Age, Wechart, Qq, Email, Contury, Address, Phone, Websize, Github, Bio) VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)';var addSqlParams = [response.name, response.password, response.firstname, response.lastname, response.birthday, response.sex, response.age, response.wechart, response.qq, response.email, response.contury, response.address, response.phone, response.websize, response.github, response.bio];ctx.body = await new Promise((resolve, reject) => {connection.query(addSql, addSqlParams, function (err, result) {if (err) {reject(err);console.log('[INSERT ERROR] - ', err.message);return;}resolve('Singup Successful!');});});connection.end();
});router.post('/uploadfiles', koaBody({multipart: true}), async (ctx) => {console.log('fields: ', ctx.request.fields);console.log('files: ', ctx.request.files);const file = ctx.request.files.myFile;const reader = fs.createReadStream(file.path);const stream = fs.createWriteStream('ArthurSlog_icon' + '.jpg');reader.pipe(stream);
});app.use(router.routes());app.listen(3000);console.log('listening on port 3000');