为什么h5上传服务器只显示图片,【Web前端问题】怎么把图片从前端上传到服务器?...
遇到一个需求,就是需要把图片传给后台数据库,然后前端再读取数据库图片,有人说base64,请问一下base64是怎么上传的?前端把图片转为base64数据,传给后台,然后后台保存base64,之后前端读取的时候再解析base64?是这样理解的吗?还有其他方法吗?
前端用的是react,后台是java
回答:
可以使用 FormData ,其属于 XHR Level 2 中内容。文件可以使用 input:file 来进行上传,并获取 fileInputElement.files[0] 作为value。
具体使用可参照以上链接。
回答:
前端把图片转为base64数据,传给后台,然后后台保存base64,之后前端读取的时候再解析base64
是的,可以这样子。转为base64数据后就是一段字符串,POST上传就好了
但是一般不会采用这种方案,因为
1.Base64要求把每三个8Bit的字节转换为四个6Bit的字节(38 = 46 = 24),然后把6Bit再添两位高位0,组成四个8Bit的字节,也就是说,转换后的数据理论上将要比原来的大1/3,消耗流量,浪费空间。
2.你转化为Base64之后怎么存储呢?存储在数据库吗?那又要多支付访问数据库的开销。存储为图片文件吗?那又要转换回来,也是增加了解析转换的开销。
3.浏览器的兼容问题,IE 8 以下不支持 data url,IE 8 开始支持 data url,却有大小限制。
所以,一般就是把图片当文件上传(multipart/form-data),然后存储于后台的静态目录,GET访问就好了
表单形式上传最简单了,谷歌一下有很多例子,在此就不多说了。
说一下用js上传吧,参考代码:
// -------- 将以base64的图片url数据转换为Blob --------
function convertBase64UrlToBlob(urlData, filetype){
//去掉url的头,并转换为byte
var bytes = window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
var i;
for (i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], {type : filetype});
}
$input.on('change', function (e) {
var input = $input.get(0);
var files = input.files || [];
if (files.length === 0) {
return;
}
console.log('选中 ' + files.length + ' 个文件');
// 遍历选中的文件,预览、上传
$.each(files, function (key, file) {
var filename = file.name || '';
var fileType = file.type || '';
var reader = new FileReader();
// onload事件
reader.onload = function (e) {
var base64 = e.target.result || this.result;
var formData = new FormData();
formData.append("upload_file", convertBase64UrlToBlob(base64, fileType), filename);
var xhr = new XMLHttpRequest();
// 开始上传
xhr.open('POST', uploadImgUrl, true);
// 发送数据
xhr.send(formData);
});
reader.readAsDataURL(file);
});
});
大致这样,仅供参考,还有很多事件处理没写,请自行补充。
回答:
其实就是楼上两位的说法。算是基于H5吧。我用过formData和swfupload。
回答:
可以试试这个插件,http://fex.baidu.com/webuploa…,功能挺齐全的,开发了高德的相关功能,亲测很好用,有问题的可以问我
回答:
当文件上传就行了,也不用什么react框架,采用原生的html表单上传就行了。
如果觉得原生表单样式很丑的话,可以用事件来实现文件上传
回答:
后台不建议用数据库存储,如果能上阿里oss这样的云存储服务最好,不行的话服务器单划一块儿空间存储也行,不过可能得留意别撑掉整个服务器。(有个h5项目被坑过,用户上传很快飙出去好几个G,服务器差点挂了……)
图片建议在前端压缩下,用户上传的通常在500k~10M这么个范围,稍微处理下保持在800k左右就差不多了(去掉的通常是些色彩配置信息啊EXIF或者是GPS信息这些东西,还有就是合理的压缩下格式,比如JPEG质量85),然后就可以打包传到后端的存储服务上了,比如阿里OSS。
回答:
我之前写过一篇关于移动端H5上传图片的文章,里面基本上囊括了移动端这块图片上传的所有坑,大家可以看看
为什么h5上传服务器只显示图片,【Web前端问题】怎么把图片从前端上传到服务器?...相关推荐
- 双路服务器只显示一半内存,双路服务器只显示一半内存
双路服务器只显示一半内存 内容精选 换一换 北京时间1月3日,Intel处理器芯片被曝出存在严重的Meltdown和Spectre安全漏洞,漏洞详情如下:漏洞名称:Intel处理器存在严重芯片级漏洞漏 ...
- 电脑常识:连不上网络,只显示飞行模式?
电脑常见问题:连不上网络,只显示飞行模式 有的时候,我们突然打开笔记本,会发现电脑突然就连不上网了,各种重启电脑都没用,是怎么回事啊?并且显示只有飞行模式,但是飞行模式并未开启啊,且网络状态显示未连接 ...
- win10服务器只显示4g内存,系统win10 64位 两个内存条一个4g一共8g显示8g但是可用只有3.9g...
点击查看系统win10 64位 两个内存条一个4g一共8g显示8g但是可用只有3.9g具体信息 系统win10 64位 两个内存条一个4g一共8g显示8g但是... 答:在开始图标上右键,选择运行,输 ...
- win7服务器只显示4g内存,安装win7 64位系统后8G内存只显示4G可用解决方法
最近有用户在安装win7 64位旗舰版系统之后,本来是8G内存,但是点开我的电脑属性,显示只有4G,用硬件工具检测内存显示是正常的,在百度上查找了也很多用户出现Windows7系统可用内存不正常的问题 ...
- 如何解决安卓上羊角符只显示一横的问题
我们常用的人民币符号,有两个:¥¥(如果你看不出区别,复制然后粘贴到浏览器地址栏里再瞅瞅),前者是全角元,后者是半角元. 二者在不同的机型上表现不一致,比如在锤子 T2.华为 mate 9 pro 和 ...
- AD16覆铜问题:覆不上铜,只显示边框
在修改了线距后,覆铜后变成只显示外框了 解决办法如下: 一.双击覆铜框,弹出它的属性对话框 1.选Hatched(Tracks/arcs) 2.将轨迹宽度设置地比栅格尺寸大些 3.其它设置参考如下图 ...
- 服务器只显示1个网口,服务器上多个个网口
服务器上多个个网口 内容精选 换一换 公有云提供弹性公网IP(EIP).NAT网关.弹性负载均衡(ELB)等方式连接公网.EIPEIP提供独立的公网IP资源,包括公网IP地址与公网出口带宽服务.可以与 ...
- 服务器只显示raid卡,服务器RAID卡介绍及监控
一.服务器 RAID卡介绍 1.内部 使用megacli命令查看得到的 SAS 6/iR :只支持2块硬盘做 raid0,或者raid1,或者不做阵列卡 (Dell硬件聊天室获得) PERC 6/i ...
- gen2服务器只显示spbc,gen2-regen培训资料.ppt
gen2-regen培训资料,regen,regen丽珍,regen面膜,auchimregen,manaregen,regenmode,cadregen,otisregen,regenhu 概述 G ...
- gen2 服务器只显示spbc,西子奥的斯GEN2调试说明-20210711142816.docx-原创力文档
可编写可改正 产品手册 第7部分 编号: (CR) 页数: 1/10 日期: 03-1-15 调试说明 版本:A 版 杭州西子奥的斯电梯有限企业 改正:第 1 次 一.前言 为保证电梯运转性能和运转靠 ...
最新文章
- github javaguide_GitHub上收获Star数排名前10的Java项目
- html去除边角,WEB开发向HTML5及CSS3迈进(1)——圆框边角的处理
- initMNN: init numpy failed mnn笔记
- 关卡2-1 简单的模拟 1540 机器翻译
- perl6 中将 字符串 转成十六进制
- python安装tensorflow_tensorflow安装过程-(windows环境下)---详解(摆平了很多坑!)...
- 去掉button按钮左右两边的留白
- Nodejs实现WebSocket通信demo
- jzoj100042-保留道路【最小生成树,图论】
- bt磁力种子与php文件,视频 | BT 种子和磁力链接是如何工作的?
- C++ Reference: Standard C++ Library reference: C Library: cfenv: FE_DOWNWARD
- Centos7局域网上共享文件夹(Samba服务)
- 文本识别 OCR 浅析:特征篇
- B2B平台显现5大价值特征和6种商业创新模式
- 【模型库】龙门铣床三维模型(具有x_t通用格式)
- 机器学习中训练的模型,通俗理解
- CAP定理与BASE理论
- python 二进制Plist文件转Xml格式Plist
- nested exception is org.springframework.core.serializer.support.SerializationFailedException异常解决
- Android定制化自己的开锁界面