Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use node+koa+axios to realize the function of picture upload and echo

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)05/31 Report--

Today, the editor to share with you how to use node+koa+axios to achieve picture upload and echo function of the relevant knowledge, detailed content, clear logic, I believe that most people are too aware of this knowledge, so share this article for your reference, I hope you have something to gain after reading this article, let's take a look at it.

Some libraries that you need to master before development

Koa: used to set up a web server

Koa2-cors: solving cross-domain problems

@ koa/router: routing processing of koa

Koa-body: the acquisition of koa parameters

Koa-static: static content

@ koa/multer multer: plug-in for uploading images

Code structure

Implementation code

1. Step 1: build a simple web service with koa+koa-router

/ / main.jsconst Koa = require ('koa') / / introduce koaconst Router = require (' koa-router') / / introduce koa-routerconst koaBody = require ('koa-body') router.get (' /' Async (ctx) = > {ctx.type = 'html' ctx.body =' hello worldview'}) app.use (router.routes ()) .use (router.allowedMethods ()) .use (koaBody ()) / start the service to listen for local port 3000 app.listen (3000, () = > {console.log ('the application has been launched Http://localhost:3000')})

Now we can open http://localhost:3000 and see hello world.

two。 Then we create a new upload folder and add code for static content to the code

/ / the new mian.js code const serve = require ('koa-static') const path = require (' path') app.use (serve (path.join (_ _ dirname,'. / upload')

At this point, if you add a photo to the upload folder, you can see it through http://localhost:3000/***.png. (*: add a suffix to your own new photo name)

3. Add a new index.html file and add the following code

Document

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report