.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.

实现目标。点击图片上传头像

效果图

在这里插入图片描述

前端部分图片上传关键代码

<div class="avatar-wrap"><el-imagestyle="width: 154px; height: 154px":src="form.headPic":fit="fit"/></div><div class="upload-box"><el-uploadclass="avatar-uploader":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload":http-request="customUpload"><!-- 自定义上传按钮 --><div class="custom-upload-btn"><span>更换头像</span></div></el-upload></div>

上传js部分

<script>
import { ref, reactive, onMounted } from "vue";
import { uploadAvatar } from "../../api/auth";
import { ElMessage } from "element-plus";
export default {setup() {const fit = ref("cover");const form = reactive({userId: 0,headPic:"https://ww1.sinaimg.cn/mw690/9516662fgy1hct88xfrd9j20k00k0dho.jpg",userName: "",phone: "",});// 上传成功后的处理函数const handleAvatarSuccess = (response, file) => {};// 上传之前的检查函数const beforeAvatarUpload = (file) => {const isJPG = file.type === "image/jpeg" || file.type === "image/png";const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error("上传头像图片只能是 JPG/PNG 格式!");}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");}return isJPG && isLt2M;};const customUpload = async (options) => {const { file, onSuccess, onError } = options;const formData = new FormData();formData.append("file", file);try {const response = await uploadAvatar(formData);onSuccess(response.data); // 上传成功时的回调} catch (error) {onError(error); // 上传失败时的回调ElMessage.error("上传失败,请重试");}};return {fit,form,customUpload,beforeAvatarUpload,handleAvatarSuccess,};},
};

auth.js

//头像上传
export function uploadAvatar(info) {return request({url: "/Pictrue/TestForm",headers: {"Content-Type": "multipart/form-data",},method: "post",data: info,});
}

有问题的后台【接口本身没有问题,小程序上传也使用的这个接口不会有问题】

 public async Task<Result> PicUploadToUrl(){try{var files = Request.Form.Files;if (files.Count > 0){List<string> urlList = new List<string>();foreach (var item in files){string[] arr = item.FileName.Split('.');              //得到当前的图片对象string format = arr[arr.Length - 1];           //得到图片后缀名称var rst = await pictureService.PicUploadToUrl(item.OpenReadStream(), item.FileName, format);if (rst.IsSuccess)urlList.Add(rst.Message);elsereturn rst;}GC.Collect();return Result.NewSuccess(urlList);}return Result.NewError(message: "图片上传失败");}catch (Exception ex){NLogUtil.Default.Log(LogLevel.Error, "PicUploadToUrl.上传错误:" + ex.Message);return Result.NewError(message: "图片上传失败");}}

解决办法,改变接收的方式

[HttpPost]
[DisableRequestSizeLimit]
public async Task<Result> TestForm([FromForm] IFormCollection formData)
{try{var files = formData.Files;if (files.Count > 0){List<string> urlList = new List<string>();foreach (var item in files){string[] arr = item.FileName.Split('.');              //得到当前的图片对象string format = arr[arr.Length - 1];           //得到图片后缀名称var rst = await pictureService.PicUploadToUrl(item.OpenReadStream(), item.FileName, format);if (rst.IsSuccess)urlList.Add(rst.Message);elsereturn rst;}GC.Collect();return Result.NewSuccess(urlList);}return Result.NewError(message: "图片上传失败");}catch (Exception ex){NLogUtil.Default.Log(LogLevel.Error, "PicUploadToUrl.上传错误:" + ex.Message);return Result.NewError(message: "图片上传失败");}
}

注意startup.cs中的配置。这里根据实际情况进行配置需要的即可

 public void ConfigureServices(IServiceCollection services){//设置接收文件长度的最大值。
services.Configure<FormOptions>(x =>
{x.ValueLengthLimit = int.MaxValue;x.ValueCountLimit = int.MaxValue;x.MultipartBodyLengthLimit = int.MaxValue;//2147483647;x.MultipartHeadersCountLimit = int.MaxValue;x.MultipartBoundaryLengthLimit = int.MaxValue;x.BufferBodyLengthLimit = long.MaxValue;x.BufferBody = true;x.KeyLengthLimit = int.MaxValue;x.MultipartHeadersLengthLimit = int.MaxValue;
});}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/419580.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vllm使用BitAndBytes量化模型失败

ValueError: BitAndBytes quantization with TP or PP is not supported yet 使用加载hf模型时&#xff0c;使用load_in_8bit来量化模型&#xff08;底层其实是调用bitsandbytes来量化&#xff09;&#xff1a; import argparse import os import torchdef parse_arguments()…

RP2040 C SDK RTC功能使用

RP2040 C SDK RTC功能使用 &#x1f4cd;《RP2040 C SDK串口功能使用》&#x1f955;RP2040 RTC API官方文档说明&#xff1a;https://www.raspberrypi.com/documentation/pico-sdk/hardware.html#group_hardware_rtc&#x1f955;官方例程参考&#xff1a;https://github.com/…

【MySQL】MySQL中表的增删改查——(基础篇)(超详解)

前言&#xff1a; &#x1f31f;&#x1f31f;本期讲解关于MySQL中CDUD的基础操作&#xff0c;希望能帮到屏幕前的你。 &#x1f308;上期博客在这里&#xff1a;http://t.csdnimg.cn/fNldO &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 目录 …

【Python篇】详细学习 pandas 和 xlrd:从零开始

文章目录 详细学习 pandas 和 xlrd&#xff1a;从零开始前言一、环境准备和安装1.1 安装 pandas 和 xlrd1.2 验证安装 二、pandas 和 xlrd 的基础概念2.1 什么是 pandas&#xff1f;2.2 什么是 xlrd&#xff1f; 三、使用 pandas 读取 Excel 文件3.1 读取 Excel 文件的基础方法…

Git常用命令备忘

Git常用命令备忘 Git已经成为程序员日常工具之一&#xff0c;那些Git基本的命令&#xff0c;每天都要用得命令你都记住了吗&#xff1f;如果还没的话&#xff0c;笔者整理了一份清单&#xff0c;以备不时之需所用。 ####三个基本概念 工作区(Workspace)是计算机中项目的根目…

熬夜后补救措施

人体的肝功能问题 直接体现在体态和容颜上 伤肝 三大坏行为 熬夜后补救 *补充养b族、口、、锌、硒 加强代谢 能力 (1)另外熬夜后一定要多喝水 提升身体代谢能力 (2)谷肤甘肽清肝 肝脏排毒&#xff0c;减轻负拒 (3)水飞前含量高点 &#xff08;4)熬夜出更多油 容易长痘 需要清…

springboot项目--后端问题记录

springboot项目后端记录 前言一、包1. lombok--自动生成勾子方法作用依赖使用 2. Validated--自动校验作用依赖使用一般参数校验实体参数校验 结论 3. JWT(json web taken) 令牌生成什么是takenJWT包依赖使用获取taken校验 封装的工具类使用 二、处理技巧1. 全局异常处理作用代…

JDBC详细知识点和操作

javaweb的作用&#xff0c;属于中间者&#xff0c;负责逻辑处理 这三部分互相协作组成了网页 javaweb也就是这三部分 一.数据库部分&#xff08;略&#xff09; 二.javaweb程序 1.JDBC 概念&#xff1a;通过java代码操作数据库 数据库种类有很多&#xff0c;比如Oracle&a…

C高级编程 第十六天(树 二叉树)

1.树 1.1结构特点 非线性结构&#xff0c;有一个直接前驱&#xff0c;但可能有多个直接后继有递归性&#xff0c;树中还有树可以为空&#xff0c;即节点个数为零 1.2相关术语 根&#xff1a;即根结点&#xff0c;没有前驱叶子&#xff1a;即终端结点&#xff0c;没有后继森…

6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)

目录 一.堆(Heap)的基本介绍 二.堆的常用操作&#xff08;以小根堆为例&#xff09; 三.实现代码 3.1 堆结构定义 3.2 向下调整算法* 3.3 初始化堆* 3.4 销毁堆 3.4 向上调整算法* 3.5 插入数据 3.6 删除数据 3.7 返回堆顶数据 四.下篇内容 1.堆排序 2.TopK问题 一…

LeetCode第414场周赛(第一题)

目录 一&#xff1a;题目&#xff1a;3280. 将日期转换为二进制表示 一&#xff1a;题目&#xff1a;3280. 将日期转换为二进制表示 给你一个字符串 date&#xff0c;它的格式为 yyyy-mm-dd&#xff0c;表示一个公历日期。 date 可以重写为二进制表示&#xff0c;只需要将年…

一款免费开源功能丰富的看图软件NeeView

NeeView 是一款功能丰富的图像查看软件&#xff0c;它以其独特的浏览体验和广泛的支持格式受到用户的欢迎。NeeView 不仅可以浏览普通的图像文件&#xff0c;还能够查看压缩包内的图片、预览PDF文档甚至播放视频文件。 NeeView 的主要特点&#xff1a; 多格式支持&#xff1a…

高频知识总结 | 算法题如何刷?我的高效刷题方法

1. 前言 所以本文章主要就是详细的告诉大家我的刷题方法论&#xff0c;可以做一个参考&#xff0c;如果你觉得我的分享对你有帮助&#xff0c;希望多多点赞收藏评论转发支持&#xff01; 2. 算法题到底该怎么刷&#xff1f; 回答这个问题只需要两个点&#xff1a;一是刷什么…

JavaWeb笔记整理13——Mybatis

目录 Mybatis介绍 删除 预编译SQL SQL注入 新增 更新 查询 数据封装 条件查询 XML映射文件 动态SQL 更新案例 foreach Mybatis介绍 删除 预编译SQL SQL注入 新增 更新 查询 数据封装 条件查询 XML映射文件 动态SQL <if> 更新案例<set> foreach &l…

AIGC简化文件管理:Python自动重命名Word和PDF文件

1.背景 大家应该也有遇到&#xff0c;自己电脑有很多文件命名不合理的文件&#xff0c;比如&#xff1a;文件1、想法3 &#xff0c;当你长时间再看到这个文件的时候&#xff0c;已经很难知道文件内容。 今天我们将借助AIGC的编码能力&#xff0c;帮我们生成一个批量改文件名的…

Linux内核编程(十五)网络设备驱动

本文目录 一、常见的网络协议二、网络模型二、网络数据的封装和解封装二、抓包工具wireshark三、传输介质四、RJ-45接口1. 百兆网口2. 千兆网口 五、PHY芯片1. 网络变压器的作用2. PHY芯片类型判断 六、MAC控制器七、MAC控制器与PHY芯片连接方式1. MII接口方式&#xff08;百兆…

CSS学习13--学成网例子

CSS例子 学成网 需要使用的图片&#xff1a; 代码&#xff1a; <html><head><style>/*CSS初始化*/* { /*清除内外边框*/padding: 0;margin: 0;}ul {list-style: none; /*清除列表样式*/}.clearfix:before,.clearfix:after { /*清除浮动*/content: &qu…

【Java毕业设计】基于SpringBoot+Vue+uniapp的农产品商城系统

文章目录 一、系统架构1、后端&#xff1a;SpringBoot、Mybatis2、前端&#xff1a;Vue、ElementUI4、小程序&#xff1a;uniapp3、数据库&#xff1a;MySQL 二、系统功能三、系统展示1、小程序2、后台管理系统 一、系统架构 1、后端&#xff1a;SpringBoot、Mybatis 2、前端…

计算机毕业设计SpringBoot+VUE自动灌装生产线 MES 系统设计

采用 B/S 架构&#xff0c;MES 应用软件通过 TCP/IP 协议与自动灌装生产线上的各个工作单元中的 PLC 控制器进行通信&#xff0c;查询或采集由 PLC 控制器采集的生产数据。通过 JAVA 构建的平台与数据库进行连接&#xff0c;实现灌装生产线的生产管理、订单管理、质量管理和数据…

问题: java.sql.SQLException:The server time zone value ‘�й���׼ʱ��‘

原文: Mybatis PlusThe server time zone valuehis unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone configuration property) to use a more specifc time zone value if you want to uti…