dotnet 3.1 + vue 实现图片上传功能

本文介绍了使用.netcore3.1后端与Vue2.x前端结合,利用Element-UI组件库实现图片上传功能的过程。前端通过el-upload组件处理上传逻辑,限制上传文件为jpg/png且大小不超过500kb;后端接收到文件并保存到指定目录,返回上传成功信息。代码示例中提到原始代码存在一些问题,已进行了优化整合。
摘要由CSDN通过智能技术生成

概括

本文后端使用 netcore 3.1,前端使用 vue 2.x 开发,本文也借鉴了很多人写的博客,但是其中相当一部分代码根本跑不通。再者就是没有充分使用element-ui封装好的组件,大量的自己书写js代码,看起来比较费劲,还有部分未做到前后端的分离,把本应该前端做的事情,交给了后端。这大概是后端出生的程序员的通病吧,哈哈,其实我也经常这样。于是自己对这些代码进了自己的一些整合,抽时间整理了一下,记录如下

前端代码(使用vue2.x + elementui组件库)

<template>
  <div>
    <el-upload class="upload-demo" drag action="http://localhost:5000/image/up" accept=".jpg, .png"
      :on-success="handleSuccess" :on-error="handleError" :before-upload="handleBeforeUpload"
      :on-progress="handleProgress" multiple>
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处,或<em
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值