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

本文主要是介绍.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;
});}

这篇关于.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140204

相关文章

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

springboot上传zip包并解压至服务器nginx目录方式

《springboot上传zip包并解压至服务器nginx目录方式》:本文主要介绍springboot上传zip包并解压至服务器nginx目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录springboot上传zip包并解压至服务器nginx目录1.首先需要引入zip相关jar包2.然

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

C#中async await异步关键字用法和异步的底层原理全解析

《C#中asyncawait异步关键字用法和异步的底层原理全解析》:本文主要介绍C#中asyncawait异步关键字用法和异步的底层原理全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一... 目录C#异步编程一、异步编程基础二、异步方法的工作原理三、代码示例四、编译后的底层实现五、总结C#异步编程

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行