I am trying to build a website. One of its functions is to upload 2 files and return 1 file. For example, I upload file A and B. What is expected to happen is these two files are uploaded to the server firstly, the server does something on them secondly and return a new file C to me, which should be automatically downloaded by the browser. But now I'm facing this error 413 when clicking on the upload button. (Days before, the error message is 405, but somehow it disappears.)
(index):74 POST http://cpsmc.jasonishere.site:81/receive 413 (Request Entity Too Large)
download @ (index):74
onclick @ (index):120
(index):68 上传失败 413 Request Entity Too Large
2(index):68 上传失败 413 Request Entity Too Large <html>
<head><title>413 Request Entity Too Large</title></head>
<body>
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx/1.18.0 (Ubuntu)</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
The webpage is written by HTML / CSS / JavaScript . The HTML file is as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟(xxy.com)</title>
<link rel="shortcut icon" href="photos/logo hape.jpg">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script>
function download() {
var fileInput = document.querySelector('#file-input');
fileInput.onchange = function () {
console.log('文件名:', this.value)
var formData = new FormData(this.form);
console.log(formData)
}
//打印出的结果是文件名: C:\fakepath\css.jpg然后在是一个空对象
var fileInput = document.querySelector('#file-input');
fileInput.onchange = function () {
var filereader = new FileReader();
var fileType = this.files[0].type;
filereader.onload = function () {
if (/^image\[jpeg|png|gif]/.test(fileType)) {
console.log(this.result);
}
}
console.log(this.files[0]);
filereader.readAsDataURL(this.files[0]);
}
console.dir(fileInput);
var files = document.getElementById("file-input").files;
//files是文件选择框选择的文件对象数组
if (files.length == 0) return;
var form = new FormData(),
url = '/receive' //服务器上传地址
file = files[0];
form.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open("post", url, true);
//上传进度事件
xhr.upload.addEventListener("progress", function (result) {
if (result.lengthComputable) {
//上传进度
var percent = (result.loaded / result.total * 100).toFixed(2);
}
}, false);
xhr.addEventListener("readystatechange", function () {
var result = xhr;
if (result.status != 200) { //error
console.log('上传失败', result.status, result.statusText, result.response);
}
else if (result.readyState == 4) { //finished
console.log('上传成功', result);
}
});
xhr.send(form); //开始上传
}
</script>
<div id="container" style="width: 1520px">
<div>
<header>
<h1 style="margin-bottom:0;"><a href="http://baidu.com/" target="_blank" rel="noopener noreferrer"
style="text-decoration:none">云剪辑<img src="photos\logo hape 1.jpg" alt="xxy" width="32" height="32"></a></h1>
</header>
</div>
<div>
<ul id="F_ul">
<li id="F_li"><a id="F_lia" href="#home">配音/录音</a></li>
<li id="F_li"><a id="F_lia" href="#news">使用教程</a></li>
<li id="F_li"><a id="F_lia" href="#contact">导出视频</a></li>
<div class="dropdown">
<a href="#" class="dropbtn">登陆方式
</a>
<div class="dropdown-content">
<a herf="#">QQ</a>
<a herf="#">Sina</a>
</div>
</div>
</ul>
</div>
<div id="content" style="height:300px;width: 1520px;float:left;">
<div style="background-color: aqua;height: 300px;width:50%;float: left;">
<div style="background-color: rgb(186, 190, 190);width:15%; height: 100%;float: left;">
<ul id="S_ul">
<li id="S_li_a"><a href="#home" class="button">fun1</a></li>
<li id="S_li_a"><a href="#home" class="button">fun2</a></li>
<li id="S_li_a"><a href="#home" class="button">fun3</a></li>
<li id="S_li_a"><a href="#home" class="button">fun4</a></li>
<li id="S_li_a"><a href="#home" class="button">fun5</a></li>
<li id="S_li_a"><a href="#home" class="button">fun6</a></li>
<li id="S_li_a"><a href="#home" class="button">fun7</a></li>
</ul>
</div>
<div style="background-color: rgb(4, 63, 63);width:85%; height: 100%;float: right;">
<p>请选择你要导入的文件</p>
<form>
<input type="file" id="file-input" name="fileContent">
</form>
<button type="button" onclick="download()">上传视频</button>
</div>
</div>
<div style="background-color: rgb(11, 49, 49);height: 300px;width:50%;float:right;">as
</div>
</div>
<div id="content" style="background-color:#EEEEEE;height:300px;width:1520px;float:left;">
<div style="background-color: rgb(34, 14, 150);height: 300px;width: 1520px;float: left;">as
</div>
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
The web browser I'm using is Edge(Chromium).
The server info :
- Ubuntu 20.04 LTS 64bit (on a Raspberry Pi4 4GB)
- Nginx version: nginx/1.18.0 (Ubuntu)
- DDNS-go from GitHub (IPv6)
Since I'm using DDNS-go as reverse DNS, I'm not sure whether this would be the cause of my problem.
The website's file is stored in /var/www/cpsmc . The Nginx service is runned by a user called network with sudo. Nginx config is as below :
user root;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
events {
worker_connections 768;
# multi_accept on;
}
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
##
# SSL Settings
##
ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
##
# Logging Settings
##
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
##
# Gzip Settings
##
gzip on;
# gzip_vary on;
# gzip_proxied any;
# gzip_comp_level 6;
# gzip_buffers 16 8k;
# gzip_http_version 1.1;
# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
#mail {
# # See sample authentication script at:
# # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
# # auth_http localhost/auth.php;
# # pop3_capabilities "TOP" "USER";
# # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
# server {
# listen localhost:110;
# protocol pop3;
# proxy on;
# }
#
# server {
# listen localhost:143;
# protocol imap;
# proxy on;
# }
#}
I would like to know how to solve this 413 error. What's more, if you can teach me the normal way (or wide-used way) to transfer files between browser and server, that will be much appreciated !
If further information is needed, please let me know. Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire