首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >antdesign + koa 实现图片上传

antdesign + koa 实现图片上传

作者头像
用户4793865
发布于 2023-01-12 08:25:08
发布于 2023-01-12 08:25:08
92800
代码可运行
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym
运行总次数:0
代码可运行

「这是我参与2022首次更文挑战的第5天,活动详情查看:2022首次更文挑战

我们今天实现一下图片上传,前端用到的是antdesign中的文件上传,后端是自己封装的node的koa框架。

这个过程大致是:前端将图片提交给后端,后端将其存入后端项目的文件夹中,然后将图片所在路径返回给前端,前端得到图片路径后将图片路径再提交到后端保存的接口,存入数据库

后端

在主文件中添加配置

我这个项目的配置文件在 app/index.js

图片上传的路径在 app/public/uploads

插件

koa-static

作用:声明一个静态文件夹,可以供上传图片找到。

安装:npm install koa-static

npm网址 : https://www.npmjs.com/package/koa-static

用法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 引入 koa-static
const koaStatic = require('koa-static');
// 引入koa
const Koa = require('koa');
// 实例化koa对象
const app = new Koa();
// 挂载
app.use(koaStatic(path.join(__dirname, 'public')))

koa-body

作用:配置koa的body体接收格式

安装:npm install koa-body

npm网址:https://www.npmjs.com/package/koa-body

用法:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const Koa = require('koa');
const koaBody = require('koa-body');
 
const app = new Koa();
 
app.use(koaBody());
app.use(ctx => {
  ctx.body = `Request Body: ${JSON.stringify(ctx.request.body)}`;
});

我们的配置 app/index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const Koa = require('koa')
const KoaBody = require('koa-body')
const path = require('path')
const koaStatic = require('koa-static')
const cors = require('koa2-cors');
const app = new Koa()
// 必须是一个函数
app.use(cors());
// 1. 文件上传到的路径 __diname是当前index.js所在的位置 public文件夹跟其同级
app.use(koaStatic(path.join(__dirname, 'public')))
// 2.在注册路由前注册
app.use(KoaBody({
    multipart: true,
    uploadDir: path.join(__dirname, 'uploads'),
    maxFileSize: 200 * 1024 * 1024,    // 设置上传文件大小最大限制,默认2M
    // 保留文件扩展名
    // keepExtensions: true,

}))

module.exports = app

添加路由

在router文件下的client.route.js中添加路由

这样添加后我们之后访问的路径就是 http://localhost:80001/client/Upload

Controller

在我们的controller文件夹下的client.controller.js中写入方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  // 图片上传
    async Upload(ctx,next){
        // 前端的name要于此出 file相同 。 如果叫 img 前端组件也需要name='img'
        const file = ctx.request.files.file; // 获取上传文件

        console.log(ctx.request,'file')
        // 创建可读流
        const reader = fs.createReadStream(file.path);
        const random_num = random(16)
        const fileName = random_num+'.'+file.name.split('.')[1]
        let filePath = path.join(__dirname, '../app/public/uploads/') + `/${fileName}`;
        
        // 创建可写流
        const upStream = fs.createWriteStream(filePath);
        // 可读流通过管道写入可写流
        reader.pipe(upStream);
        最后将图片的存储路径返回
        ctx.body = {'url':`${ctx.origin}/uploads/${fileName}`}     
    }

前端

antdesgin对应的文档 :https://ant.design/components/upload-cn/

我们先看组件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { Button, Input, Drawer, Form, Select, Tag, Upload, message } from 'antd';
      <Upload
              // 对应后端的 ctx.request.files.file
              name="file"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="/api/client/Upload"
              beforeUpload={beforeUpload}
              onChange={handleChange}
            >
              {imageUrl ? (
                <img src={imageUrl} alt="avatar" style={{ width: '100%', marginTop: '10px' }} />
              ) : (
                <div>
                  {loading ? <LoadingOutlined /> : <PlusOutlined />}
                  <div style={{ marginTop: 8 }}>Upload</div>
                </div>
              )}
            </Upload>

首先,注意name要和后端接收的名字对应上

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 后端对应代码
const file = ctx.request.files.file; // 获取上传文件

listType

上传列表的内建样式,支持三种基本样式 textpicture 和 picture-card 他们的样式也不相同。可以去官网具体看。

showUploadList

是否展示文件列表, 可设为一个对象,用于单独设定 showPreviewIconshowRemoveIconshowDownloadIconremoveIcon 和 downloadIcon

action

也就是 form表单写法的action方法,即提交对应的的后端路径。这里的 /api代理到了 localhost:8001

然后看用到的方法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
 // 图片地址
  const [imageUrl, setImageUrl] = useState<string>();
  // 加载
  const [loading, setLoading] = useState(false);
  // 上传前
  const beforeUpload = file => {
    // 图片格式
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng &amp;&amp; isLt2M;
  };
  // 转为base64
  const getBase64 = (img: Blob, callback: any) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  };
  // 上传图片
  const handleChange = (info: any) => {
    console.log(info.file, 'info');
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (imageUrl: any) => {
        setImageUrl(imageUrl);
        setSubmitParams({ ...submitParams, cover: info.file.response.url });
        setLoading(false);
      });
    }
  };
  const handleUpload = e => {
    const file = e.target.files[0];
    console.log(file, 'hand');
  };

beforeUpload

图片提交前的处理函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  // 上传前
  const beforeUpload = file => {
    // 图片格式
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng &amp;&amp; isLt2M;
  };

handleChange

上传图片

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  // 上传图片
  const handleChange = (info: any) => {
    console.log(info.file, 'info');
    // 上传过程中将loading状态设为true
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    // 上传完成 
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (imageUrl: any) => {
      // 设置图片路径
        setImageUrl(imageUrl);
        // 设置提交参数 我这个页是个大表单 图片只是一部分。我们要把上传图片接口返回的图片的
        // 存储路径返回
        setSubmitParams({ ...submitParams, cover: info.file.response.url });
        //上传完成将loading状态设为true
        setLoading(false);
      });
    }
  };

实现效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-01-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
《大胖 • 小课》- 写一个文件上传接口
这是《大胖小课》栏目的专题一《说说文件上传那些事儿》的第二节-《写一个文件上传接口》
zz_jesse
2020/03/17
5400
【koa快速入门】之最佳实践
前一节我们已经讲过koa的基本使用(不了解的可以先读读这篇文章《koa快速入门之基础使用》,下面的思维导图列出来大概的知识),但是都是基于单文件开发的,本文介绍一下koa项目开发的最佳实践。
luciozhang
2023/04/22
9480
【koa快速入门】之最佳实践
React 实现一个markdown[2]
theme: channing-cyan highlight: a11y-light
用户4793865
2023/02/03
1.2K0
【Koa】385- koa框架的快速入门与使用
Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。Koa 并没有捆绑任何中间件, 而是提供了一套优雅的方法,帮助您快速而愉快地编写服务端应用程序。
pingan8787
2019/10/23
6060
vue获取上传文件路径_vue中文件上传及接收「建议收藏」
this.imageUrl = URL.createObjectURL(file.raw);
全栈程序员站长
2022/09/22
4.1K0
存储腾讯云(例:上传图片)
服务器属于个人的,需要一定的权限才能自由上传图片,这个负责权限验证的其实就是秘钥。拥有秘钥是进行上传的基础条件。
玖柒的小窝
2021/10/26
17.6K0
存储腾讯云(例:上传图片)
Koa 框架教程
Node 主要用在开发 Web 应用。这决定了使用 Node,往往离不开 Web 应用框架。 Koa 就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高。本身代码只有1000多
ruanyf
2018/04/12
1.6K0
Koa 框架教程
Koa 框架教程
Node 主要用在开发 Web 应用。这决定了使用 Node,往往离不开 Web 应用框架。 Koa就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高。本身代码只有1000多行,所有功能都通过插件实现,很符合 Unix 哲学。 本文从零开始,循序渐进,教会你如何使用 Koa 写出自己的 Web 应用。每一步都有简洁易懂的示例,希望让大家一看就懂。 零、准备 首先,检查 Node 版本。 $ node -v v8.0.0 Koa 必须使用 7.6 以上的版本。如果你的版本低于这个要
企鹅号小编
2018/02/08
1K0
Koa 框架教程
Koa2+MongoDB+JWT实战--Restful API最佳实践
Web API 已经在最近几年变成重要的话题,一个干净的 API 设计对于后端系统是非常重要的。
前端森林
2020/04/23
10K0
Koa2+MongoDB+JWT实战--Restful API最佳实践
如何用 Serverless 优雅地实现图片艺术化应用
本文将分享如何从零开始搭建一个基于腾讯云 Serverless 的图片艺术化应用! 项目已开源,完整代码见文末 线上 demo 预览: https://art.x96.xyz/ 在完整阅读文章后,读者应该能够实现并部署一个相同的应用,这也是本篇文章的目标。 项目看点概览: 前端 react(Next.js)、后端 node(koa2) 全面使用 ts 进行开发,极致开发体验(后端运行时 ts 的方案,虽然性能差点,不过胜在无需编译,适合写 demo) 突破云函数代码 500mb 限制(提供解决方案)
腾讯云serverless团队
2020/09/18
2.4K0
Nodejs实现图片的上传、压缩预览、定时删除。
这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力、更健壮的web框架。
Vam的金豆之路
2021/11/30
1.6K0
Nodejs实现图片的上传、压缩预览、定时删除。
【解决方案】ElementUI图片上传前如何对尺寸进行验证并且上传到新浪SCS?
具体的属性可以查看官方文档,这里用到的是:before-upload="beforeAvatarUpload" 这个钩子函数,看名字就知道这是在图片上传前执行的方法,在此可以进行一些验证,官方给出了对图片类型以及大小的验证,接下来将实现对图片尺寸的验证.
一尾流莺
2022/12/10
1.3K0
【解决方案】ElementUI图片上传前如何对尺寸进行验证并且上传到新浪SCS?
在线IDE开发入门之从零实现一个在线代码编辑器
3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写、运行和调试代码,它可以直接运行在浏览器中,也就是传说中的 Web IDE。3年后的今天随着国内云计算的发展, 各大云计算服务厂商都在部署自己的WEB IDE, 而且已经有非常成熟的落地方案, 对于这一块的技术原理和实现, 也非常值得我们去学习和剖析.
徐小夕
2020/09/18
4.3K0
Nodejs实现图片的上传、压缩预览、定时删除
我们程序员日常都会用到图片压缩,面对这么常用的功能,肯定要尝试实现一番。 第一步,node基本配置
马克社区
2022/06/14
1.2K0
koa搭建node服务
介绍 使用koa搭建node服务 并连接mongodb返回前端数据 git https://gitee.com/wjj0720/koa... 项目初始化 首先保证你的node环境已经就绪 1、创建项目文件夹 创建文件夹test,在文件夹中shift+右键 在此处运行命令行 运行 npm init --y 2、 安装依赖 npm i koa koa-body koa-static koa-cors 创建服务 // server.js /* * 1、在项目文件中创建一个server.js文件
random_wang
2019/09/11
8650
Node.js 应用:Koa2 之文件上传下载
上传下载在 web 应用中还是比较常见的,无论是图片还是其他文件等。在 Koa 中,有很多中间件可以帮助我们快速的实现功能。
用户1065635
2019/11/27
3.9K0
typescript实战总结之实现一个互联网黑白墙
笔者上一篇文章 TS核心知识点总结及项目实战案例分析 主要写了typescript的用法和核心知识点总结, 这篇文章将通过一个实际的前端案例来教大家如何在项目中使用typescript.
徐小夕
2020/08/17
1.3K0
typescript实战总结之实现一个互联网黑白墙
ejs koa
npm https://www.npmjs.com/package/koa-static
mySoul
2018/08/26
2.9K0
深入浅出 Koa2:现代 Node.js 框架
Koa2 是一个现代的、简洁的 Node.js 框架,由 Express 团队设计和开发。与 Express 相比,Koa2 提供了更加精简和强大的功能,特别是其中间件处理机制和异步编程能力,深受开发者喜爱。本文将详细介绍 Koa2 的安装、基本用法、核心概念及其高级功能,并通过示例代码展示如何构建一个功能完整的 Web 应用程序。
Michel_Rolle
2024/07/31
3.2K0
vue+element-ui+xlsx实现校验前端上传的Excel文件
项目中需要校验上传的Excel模板是否符合规范。一开始的想法是在后端进行校验,但是后来想到一个跑批的文件最大是2M,如果放置在后端校验,对于不规范的文件,这2M的传输也就白费了,同时,对于用户的体验也很不好,就想把校验放置在客户端,不合乎规范的文件直接拒掉,节省带宽同时客户体验也有所改善。
RedSheep
2019/09/19
5.1K0
vue+element-ui+xlsx实现校验前端上传的Excel文件
相关推荐
《大胖 • 小课》- 写一个文件上传接口
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验