前端传图片file给后端，后端接收为空，0kb

已于 2022-10-28 10:27:43 修改
阅读量1.9k 收藏 3
点赞数
文章标签： vue.js css3 es6 javascript html5
于 2021-12-02 09:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TAAAAAB/article/details/121670099
版权

@TOC需求场景：前端canvas生成海报以file格式传给后端存储，大部分机型是正常的 到了iphone7P上传给后端 后端接收到为空 0Kb

一开始我是这样做的

在这里插入图片描述
这样在大部分机子上是可以的 但在低版本ios上是不兼容的
解决方法是先转成blob 在转成file
在这里插入图片描述

至此 问题解决 记录一下

super5⁢
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
上传图片显示大小为0kb和图片回显不成功
syy_675580815的博客
06-01 7609
    1、首先在虚拟机中将nginx和ftp环境变量配置好，然后用filezilla将客户端和服务端相连接，在做图片上传测试时，在filezilla中发现图片上传后大小为0kb，故找到了原因是未将ftp连接模式写为被动模式，于是在测试文件中加入如下代码：    ftpClient.enterLocalPassiveMode();//将其设置为被动模式可以参考博客网址：https://blog.c...
前端压缩图片以及php后端上传共7页.pdf.zip
10-30
当用户在网页上上传图片时，未经压缩的大尺寸图片可能导致加载速度慢，消耗大量带宽，从而影响网站性能。常见的前端图片压缩库有`Lodash`的`_.resize()`、`HTML5`的`canvas` API以及`TinyPNG`的JavaScript SDK等。...
Antd多文件上传后台接收为null问题
开源世界
03-15 2708
Antd多文件上传后台接收为null问题 在使用antd开发过程中，Upload组件的上传，一般是通过action配置后端接口地址，自动上传文件；但是当文件数量较多时，需要进行手动上传，但是手动上传后台一直无法接收到数据，数据为null。 代码实现 前段组件代码如下： const onRemove = (file) => { this.setState((state) => { const index = state.fileList.indexOf(file);
uni.uploadFile上传图片后台接收不到数据
最新发布
每天都要努力学习哦~~
04-17 1103
今天遇到一个很奇怪的问题，通过使用uni.uploadFile上传文件时后端接收不到文件，查过很多资料，原来是自定义了header的Content-Type问题。取消即可，另把自定义文件上传的代码贴出来。浏览器会默认帮我们加上请求头，并且默认加上一串boundary信息。select文件动作保存文件信息。分析：当我们加上请求头的时候。
前端上传文件到后端获取不到File对象问题（axios到koa2）
蓝散bennkyo的博客
12-16 4421
前端发送请求使用axios 后端框架为koa2 尝试使用axios的post方法直接给后端传File对象，出现500或者空对象问题 出错示例： <input type="file" onChange={v => axios.post(URL, v.target.files[0])} /> 解决方法： Koa中的Koa-router中间件需要开启multipart配置 前端上传File时使用FormData 后端通过ctx.request.files来获取File // 前端代码 .
java后端一直接收不到前端传base64位的图片
wo13he14的博客
04-24 1533
改成实体去接参数也不行。废话不多说，直接说解决方法。
ajax传入后台的数据为空,ajax上传图片到后台，接受的数据一直显示为空
weixin_34838910的博客
08-05 595
用ajax上传图片，后台说接收的数据一直是空 我这边也不是很懂 第一次做图片上传 代码如下htmljqvarformData=newFormData();$.each($('.file1')[0].files,function(i,file){formData.append('file1',file);});$.ajax({url:"upload_image.do",type:"PO...
Spring Boot 文件上传后端获取为null
wshjk的博客
04-22 3876
前言 今天学习使用springboot实现文件上传与下载功能，在实现文件上传的时候代码都没问题，但是每次提交后端都包空指针异常，最后发现获取的file为null。 先看代码 前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <div st
[Vue]对图片上传组件的封装
01-20
- 服务器端的代码片段展示了如何接收上传的图片（`MultipartFile`），检查其非空性，生成唯一的文件名，保存到指定路径，并返回文件名给前端。 通过这样的封装，我们可以得到一个具有图片预览、文件大小及格式验证...
nginx解决图片显示过慢，下载不完全的问题
09-29
例如，如果大多数文件在100KB到5MB之间，那么将该值设置为大于5MB即可。 2. **修改目录权限**：将`proxy_temp`目录的权限设置为允许nobody用户写入。例如，使用`chmod -R 777 /usr/local/nginx/proxy_temp`命令可以...
PHP AjaxForm提交图片上传并显示图片
12-18
这个过程涉及前端用户界面的交互以及后端服务器端的处理。以下是详细的知识点解析： 1. **AjaxForm**：AjaxForm是jQuery的一个插件，它允许用户异步提交表单，无需页面刷新就能发送数据到服务器并接收响应。在这个...
springMVC图片上传的处理方式详解
08-29
alert("请上传大小小于300KB的图片！"); return; } $.ajax({ url: '/admin/upload', type: 'POST', data: formData, cache: false, processData: false, contentType: false }).done(function (result) {...
HTTP上传文件，后端request.FILES为空，怎么办？一文让你理解
m0_55837832的博客
04-12 3141
服务端request.FILES一直为空拿不到值？ 原因之一：检查客户端模拟HTTP 组装报文 content-type字段是否设置错误。大概率是因为这个字段设置错误（在报文组装正确情况下），源码见帖{% url “helloword” %} 在HTTP协议 content-type字段意义之重要，堪比额~~，下图为随便抓取的一个Html报文，其格式固定，你再模拟HTTP请求时也要按照这个格式组装报文。 HTTP content-type Content-Type（内容类型），一般是指网页中存在的 Con
springmvc后台接收不到图片解决办法
i晨i曦520
10-30 1623
“` public class UploadController {@RequestMapping(value="/upload/uploadPic.do") //required=false express file upload is optional public void uploadPic(@RequestParam(required=false)MultipartFile file){
前端传file文件和json报文到java后端处理
佐小锘
08-03 4271
前端传file文件和json报文到java后端处理（现有架构中的post过滤器只能处理json报文格式）
ElementUI 头像上传后端无法接收 MultipartFile问题
爪哇岛民工的博客
11-03 1900
在前端用了ElementUI，当使用上传头像组件的时候发现后端的方法里接受不到MultipartFile类型的参数。 后台代码： 前台代码： 解决办法： 在后台参数上加上@RequestParam（）注解，括号里写上关键字 在前端的 el-upload 组件里加上name属性，值就是参数上的关键字 查看log发现接收到了实例 ...
前端文件上传
qq_43853213的博客
03-27 955
files: 通过input 标签读取过来的文件对象，是blob的子类。多用于把文件读取为某种形式，如base64 ， text文本。不可变的二进制内容，包含很多操作方法。files 对象转blob 对象。blob 对象转 files对象。formData 传输。转为base64传输。
axios前后端文件传输
liu不是liu的博客
08-24 704
使用axios实现文件上传到后端
安卓上传文件php失败,android - php上传图片时 $_FILES为空
weixin_33593741的博客
03-13 210
写了一个php上传的程序，用来接收安卓post上传过来的图片，接收到的$_FILES为空。 这个程序在之前的服务器上是可以的，程序没有改动的情况下，迁移到新的服务器后就不行了。原来的服务器php 5.3.10 Apache2.2.22，新的服务器上php 5.4.31 Apache2.2.27。写了一个html的表单页面用来测试上传到新服务器的这个php文件是可以的，正常上传。也就是说从安卓过来的...
微信小程序前端调用一次后端接口实现批量上传图片和参数，前后端代码示例，后端使用java
06-08
好的，以下是一个简单的微信小程序前端调用一次后端接口实现批量上传图片和参数的示例代码，后端使用Java实现。 前端代码： ```javascript wx.chooseImage({ count: 9, // 最多可以选择的图片张数 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 将选择的图片上传到服务器 wx.uploadFile({ url: 'https://example.com/upload', // 后端接口地址 filePath: res.tempFilePaths, // 需要上传的文件列表 name: 'file', // 后端接口中接收文件的参数名 formData: { 'user': 'test' // 其他需要传递的参数 }, success: function (res) { // 上传成功后的处理 console.log(res.data) }, fail: function (res) { // 上传失败后的处理 console.log(res.errMsg) } }) } }) ``` 后端代码（使用 Spring Boot 框架）： ```java @RestController public class UploadController { @PostMapping("/upload") public String handleFileUpload(@RequestParam("file") MultipartFile[] files, @RequestParam("user") String user) { for (MultipartFile file : files) { // 处理上传的文件 System.out.println("上传的文件名：" + file.getOriginalFilename()); System.out.println("上传的文件大小：" + file.getSize()); } // 处理其他参数 System.out.println("user：" + user); return "上传成功"; } } ``` 以上代码仅作为示例，具体实现应根据实际需求进行修改。需要注意的是，Spring Boot 框架中需要在配置文件中设置上传文件的临时存储路径，例如： ```properties spring.servlet.multipart.enabled=true spring.servlet.multipart.file-size-threshold=2KB spring.servlet.multipart.max-file-size=200MB spring.servlet.multipart.max-request-size=215MB spring.servlet.multipart.location=/tmp ``` 其中`spring.servlet.multipart.location`就是上传文件的临时存储路径。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值