本地可以传大于1M的图片,连线上后无法上传,报错:Access-Control-Allow-Origin & 413 (Request Entity Too Large)
连线上的 ip 地址是可以上传的,但是小程序要求使用域名,而使用域名时就会报这个错
- 使用域名时小于1M的居然还是可以成功传上去的,诡异得很
解决方案
nginx 配置 client_max_body_size 10M;
(域名对应规则下面要配置)
- 配置完记得重启 nginx 重新加载配置
# …… 其他的配置
http {
include mime.types;
default_type application/octet-stream;
server {
listen 9169 ssl;
server_name www.xxxx.com; # 自己替换 xxxx
# ssl 的一些配置 start ↓ (具体怎么搞网上搜一下有教程)
ssl_certificate E:/xxxyyy/nginx-1.16.1/ssl/www.xxxx.com.pem; # 自己替换 xxxyyy xxxx
ssl_certificate_key E:/xxxyyy/nginx-1.16.1/ssl/www.xxxx.com.key; # 自己替换 xxxyyy xxxx
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers AESGCM:ALL:!DH:!xxx:!RC4:+HIGH:!xxxx:!LOW:!xxx:!xxx; # 不知道这里有没有安全隐患,也随意替换了一些文本,请见谅
ssl_prefer_server_ciphers on;
# ssl 的一些配置 end ↑
location / {
root html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ^~ /api/ {
# !!!!!!!!!!↓ 关键配置 ↓ !!!!!!!!!!!!!!!!!!
client_max_body_size 10M;
# !!!!!!!!!!↓ 关键配置 ↑ !!!!!!!!!!!!!!!!!!
# …… 其他的配置
}
}
感谢网友分享
413 Request Entity Too Large-CSDN博客
413 Request Entity Too Large_Bunny0212的博客-CSDN博客
(微信小程序后台那边的是之前就配过了的,不是这个问题,参照本文还无法解决可以看看是不是这个原因,虽然这个原因的报错应该很明显)
(另一个坑)H5 可以上传图片,小程序上不行
本来这个问题也挺容易发现的,尴尬的是伴随着前面那个bug,bug 叠加,疑惑性上来了,没有意识到这里有问题
原因:需求层面限制了上传图片的类型,代码里是用 file.name 字符串后缀来判断的,但是 微信上文件对象结构不一样,取不到相关字段,所以就报错了
解决方案:判断一下数据对象,根据不同端取不同的字段去做判断,从而兼容两端
问题代码↓
同一张图片在微信开发者工具和浏览器开发者工具中打印出来的结果异同 ↓
微信开发者工具打印出来的文件对象 ↓
H5 在浏览器开发者工具打印出来的文件对象 ↓
显然,得根据不同的字段来做文件类型判断