解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large

更新時間：2024年08月29日 09:03:19 作者：IT博客技術(shù)分享

這篇文章主要介紹了解決vue前端文件上傳報錯:上傳失敗,原因:413 Request Entity Too Large,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue前端文件上傳報錯:上傳失敗,原因: 413 Request Entity Too Large

先上報錯效果圖

問題

在本地開發(fā)中無論上傳小文件還是大文件都可以上傳成功，但將代碼發(fā)布到測試環(huán)境后，超過1mb的文件就會報錯，打開控制臺一看413 Request Entity Too Large。

排查我們的系統(tǒng)接口

在node層做了一下轉(zhuǎn)發(fā)代理用到了koaBody （有的沒有加這個，可以忽略）

app.use(
  koaBody({
    parsedMethods: ['POST', 'PUT', 'PATCH', 'DELETE'],
    formLimit: '200mb',
    jsonLimit: '200mb', // ajax 請求
    textLimit: '200mb',
    multipart: false,
    formidable: {
      maxFieldsSize: 10 * 1024 * 1024
    },
  })
);

前端限制解除，重新打包上線，還是報錯 413 Request Entity Too Large

繼續(xù)排查

Nginx默認(rèn)最大能夠上傳1MB文件，大于1MB的文件自然無法上傳，打開nginx.conf（沒權(quán)限找運維人員）在http{ }中設(shè)置：client_max_body_size 200m。

這里根據(jù)自己公司的需求限制大小哈，我們這限制為200M.

解除成功的案例

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3項目中使用tinymce的方法
這篇文章主要介紹了vue3使用tinymce的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04
vue中想要mock數(shù)據(jù)在線上環(huán)境生效如何操作
本文主要介紹了在配置了mock數(shù)據(jù)之后在線上環(huán)境使用,主要通過在main.ts文件中注冊和vite.config.ts文件夾中配置插件來實現(xiàn),感興趣的可以了解一下
2025-01-01
VUE?項目如何使用?Docker+Nginx進行打包部署
使用?Docker,你可以創(chuàng)建一個包含?Vue.js?應(yīng)用程序的容器鏡像,并在任何支持?Docker?的環(huán)境中運行該鏡像,這篇文章主要介紹了VUE?項目用?Docker+Nginx進行打包部署,需要的朋友可以參考下
2024-06-06
從源碼角度來回答keep-alive組件的緩存原理
這篇文章主要介紹了從源碼角度來回答keep-alive組件的緩存原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
vue.js中關(guān)于點擊事件方法的使用(click)
這篇文章主要介紹了vue.js中關(guān)于點擊事件方法的使用(click)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Electron集成React和Vue流程方法講解
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Electron集成React和Vue的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-08-08
Vue實戰(zhàn)之vue登錄驗證的實現(xiàn)代碼
本篇文章主要介紹了Vue實戰(zhàn)之vue登錄的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10
element?UI中el-dialog實現(xiàn)拖拽功能示例代碼
我們在開發(fā)中常會遇見拖拽的功能,下面這篇文章主要給大家介紹了關(guān)于element?UI中el-dialog實現(xiàn)拖拽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-12-12
使用ElementUI循環(huán)生成的Form表單添加校驗
這篇文章主要介紹了使用ElementUI循環(huán)生成的Form表單添加校驗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue的過濾器filter實例詳解
本文通過實例代碼給大家介紹了vue的過濾器filter的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2018-09-09