利用node+koa+axios实现图片上传和回显功能

目录
  • 前言
    • 开发前需要掌握的一些库
    • 代码结构
  • 实现代码

前言

代码地址

开发前需要掌握的一些库

koa：用来起一个web服务器

koa2-cors: 解决跨域问题

@koa/router: koa的路由处理

koa-body： koa参数的获取

koa-static: 静态内容

@koa/multer multer:图片上传的插件

代码结构

实现代码

1.第一步:用koa+koa-router搭建一个简单的web服务

//main.js
const Koa = require('koa') // 引入koa
const Router = require('koa-router') // 引入koa-router
const koaBody = require('koa-body')
router.get('/', async (ctx) => {
    ctx.type = 'html'
    ctx.body = '<h1>hello world!</h1>'
})
app.use(router.routes())
    .use(router.allowedMethods())
    .use(koaBody())

// 启动服务监听本地3000端口
app.listen(3000, () => {
    console.log('应用已经启动，http://localhost:3000')
})

现在我们就可以打开http://localhost:3000看到 hello world

2.接着我们新建一个upload文件夹,且在代码中加入静态内容的的代码

//mian.js 新增代码
const serve = require('koa-static')
const path = require('path')
app.use(serve(path.join(__dirname, './upload')))

此时假如你在upload文件夹下新增一张照片便可通过http://localhost:3000/***.png 查看到了。（***：你自己新增的照片名称加后缀）

3.此时新增一个index.html文件，且加入以下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" class="file" name="avatar">
  <button onclick="send()">上传</button>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    let formData = new FormData()
    document.querySelector('.file').addEventListener('change', function(e) {
          let files = e.target.files
          console.log(files)
          if (!files.length) return
          formData.append('file', files[0], files[0].name)
        })
        function send(){
          axios.post('http://localhost:3000/upload',formData,{
            Headers:{
              "Content-type":"multipart/form-data"
            }
          })
        }
  </script>
</body>
</html>

选择图片且上传会发现存在跨域问题，那么发现问题解决问题直接上代码：

//mian.js新增代码
const cors = require('koa2-cors')
app.use(cors())//注意这个配置要在router前使用不然不生效

解决完跨域后,选择图片且上传.咦~404好吧没有新增对应的router,走起：

router.post('/upload', async (ctx) => {
    ctx.body = 'ok'
})

此时咱们已经拿到传过来的数据啦，重头戏来了：@koa/multer使用

const multer = require('@koa/multer')
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        const fileFormat = (file.originalname).split('.')
        cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
    }
})
const upload = multer({ storage })

配置好后修改/upload

router.post('/upload', upload.single('file'), async (ctx) => {
    console.log('ctx.request.body', ctx.request.body)
    ctx.body = 'done'
})

note:需要注意的是upload.single('file'),中的file需要和上方的index.html中的formData字段一致 此时就可以愉快的上传啦~~~

到此这篇关于利用node+koa+axios实现图片上传和回显功能的文章就介绍到这了,更多相关node koa axios图片上传回显内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue+node实现图片上传及预览的示例方法

    vue+node实现图片上传及预览的示例方法

    本文介绍了vue+node实现图片上传及预览的示例方法,分享给大家,具体如下: 先上效果图 上代码 html部分主要是借助了weui的样式 <template> <div> <myheader :title="'发布动态'"> <i class="iconfont icon-fanhui1 left" slot="left" @click="goback"></i>

  • node之本地服务器图片上传的方法示例

    在自己做一个简单的后台管理系统时,用的是node作本地数据库,然后用了Element-ui的upload组件来实现图片的上传,中间有遇到那么点小坑,这里记录下,比较坑的一点就是,不知道文件的命名不能带空格,然后改了好久 1.index.vue文件 这里的话,就是简单点的使用图形界面框架Element-ui的上传组件,然后,action就是服务器端的地址,我这里使用了代理,将localhost:8080代理到你使用node作为服务器的地址就可以了 <template> <div class

  • nodejs 图片预览和上传的示例代码

    nodejs 图片预览和上传的示例代码

    本文介绍了nodejs 图片预览和上传的示例代码,分享给大家,具体如下: 效果如下: 前言 一般在上传图片之前需要暂存在本地预览一下. 前端图片预览用的是 FileReader的readAsDataURL方法 nodejs 图片上传用的是中间件 Multer 本地图片预览 FileReader对象允许web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用文件或Blob对象来指定要读取的文件或数据. readAsDataURL方法用于读取指定的Blob或文件的内容.当读取操

  • Nodejs实现图片上传、压缩预览、定时删除功能

    前言 我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番. 第一步,node基本配置 这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力.更健壮的web框架. 1.引入基本配置 const Koa = require('koa');// koa框架 const Router = require('koa-router');// 接口必备 const cors = require('koa2-cors'); // 跨域必备 const tinify =

  • NodeJS实现图片上传代码(Express)

    NodeJS实现图片上传代码(Express)

    文件上传是每个网站不可避免的,最近需要做些上传图片的功能,主要解决两个问题,一个是文件上传样式和服务端路径保存,功能很简单,做起来倒是没那么简单,先从最简单的页面的上传页面的样式开始. 页面样式 Html页面默认的上传的是比较难看的,需要重做一个背景图片,通过背景图片添加上传的图片: 上传图片样式: <div class="upload-container"> <input type="file" name="fileToUpload&q

  • 利用nodeJS+vue图片上传实现更新头像的过程

    利用nodeJS+vue图片上传实现更新头像的过程

    目录 思路: 1.前端准备 2.node后端服务 总结 思路: 前端通过el-upload将图片传给后端服务,后端通过formidable中间件解析图片,生成图片到静态资源文件夹下(方便前端直接访问),并将图片路径返回给前端,前端拿到图片路径即可渲染头像. 1.前端准备 前端采用vue的el-upload组件,具体用法见官方API.使用代码如下 <!--头像上传--> <el-upload class="avatar-uploader" action="ht

  • 利用node+koa+axios实现图片上传和回显功能

    利用node+koa+axios实现图片上传和回显功能

    目录 前言 开发前需要掌握的一些库 代码结构 实现代码 前言 代码地址 开发前需要掌握的一些库 koa:用来起一个web服务器 koa2-cors: 解决跨域问题 @koa/router: koa的路由处理 koa-body: koa参数的获取 koa-static: 静态内容 @koa/multer multer:图片上传的插件 代码结构 实现代码 1.第一步:用koa+koa-router搭建一个简单的web服务 //main.js const Koa = require('koa') //

  • Spring Boot 实现图片上传并回显功能

    Spring Boot 实现图片上传并回显功能

    一.常规形式 1 项目结构 2 配置文件及环境设置 (1)配置文件 # 应用服务 WEB 访问端口 server.port=8080 # spring 静态资源扫描路径 spring.resources.static-locations=classpath:/static/ # 访问template下的html文件需要配置模板 spring.thymeleaf.prefix.classpath=classpath:/templates/ # 是否启用缓存 spring.thymeleaf.cac

  • 如何用input标签和jquery实现多图片的上传和回显功能

    本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input-file标签非常丑,我们美化一下它,不会的可以百度一下,就是外面套个盒子,设置input的opacity为0,然后外面的盒子设计成我们喜欢的样式即可,我就随便做了一下. 大概的样式 还是放一下源码,只谈效果,不放源码的都是耍流氓 这是body <body> <div class="

  • 解决layui富文本编辑器图片上传无法回显的问题

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu

  • SpringBoot2.0实现多图片上传加回显

    SpringBoot2.0实现多图片上传加回显

    目录 上传 效果展示 配置上传图片的属性 异常处理 遇到的坑 完整代码地址 这两天公司有需求让做一个商户注册的后台功能,其中需要商户上传多张图片并回显.由于之前没做过这方面的东西,此篇文章用以记录一些知识点,以便后续查看. 上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input>中的name值相对应 @RequestMapping("/pic"

  • 利用Vue3和element-plus实现图片上传组件

    利用Vue3和element-plus实现图片上传组件

    目录 前言 具体代码 图片上传 上传组件 前言 element-plus 提供了 uploader 组件,但是不好定制化,所以自己又造了个轮子,实现了一个图片上传的组件,它的预期行为是: 1.还没上传图片时,显示上传卡片 2.上传图片时显示进度条,隐藏上传卡片 3.上传成功时显示图片缩略图,上传失败则显示失败提示 4.支持上传图片的预览和删除 具体如下图所示: 具体代码 图片上传 这里使用的图床是牛图网,无需注册,貌似也没有图片大小的限制,但是请不要上传违规图像. <code>import a

  • 全面解析node 表单的图片上传

    node 全面解析表单的图片上传 ,multiparty解析与内容类型的HTTP请求multipart/form-data,也被称为文件上传. multiparty安装 npm install multiparty html代码 <form action="/api/uppic" method="post" > <input type="file" name="pic" > <input type

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（同步显示图像位置信息）

    <body> <div class="container demo"> <div class="big"> <p class="instructions">大图预览</p> <div class="bigframe"> <img width="300" height="300" src="images

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    利用jQuery插件imgAreaSelect实现图片上传裁剪（放大缩小）

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ［"区域":是宽*高,也就是面积:] ［"放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数］ 一.怎么能放大或者缩小图片的局部?

  • vue+element-ui+axios实现图片上传

    本文实例为大家分享了vue+element-ui+axios实现图片上传的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples<

随机推荐