H5上传图片

本文作者:IMWeb helondeng 原文出处:IMWeb社区 未经同意,禁止转载

最近做产品小A的需求,设计到图片的上传问题,整理一下。

PC上传图片

基本结构
  1. form[enctype="multipart/form-data"]
  2. input[type="file"]
  3. 上传完毕后,获取图片url,显示到页面上
问题
  1. 图片要上传完毕后,才能显示
  2. 压缩上传

H5 如何解决

  1. FileReader
  2. canvas

FileReader

FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。

var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
    $('img').attr('src', e.target.result);
};

FormData

实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。

var fd = new FormData();
 fd.append('filename', file);
$.ajax({
     url: 'xxxx/yyyy',
     data: fd,
     type: 'POST',
     cache: false,
     processData: false,
     contentType: false,
     dataType: 'json',
     success: function(data) {
     },
     error: function() {
     }
});

canvas

手机的流量是宝贵的,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。

var img = new Image();
img.src = base64;
img.onload = function(){
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    canvas.getContext("2d").drawImage(img, 0, 0);
    var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}

上传base64

使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案:

  1. server支持,单独开接口处理base64上传
  2. 前端将base64转化成File对象,复用原来的server接口

这里重点讨论第2中方案。JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。基于此,只需要把base64转化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。

// 解码base64
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// 类型数组
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
    type: mimeString
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 快速学习Dubbo-分布式概述

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • Dubbo面试18问!这些你都会吗?

    透明化的远程方法调用,就像调用本地方法一样调用远程方法,只需简单配置,没有任何API侵入。软负载均衡及容错机制,可在内网替代F5等硬件负载均衡器,降低成本,减少...

    一个优秀的废人
  • 如何向纯洁的女朋友解释并发与并行的区别?

    那么什么是并发?什么又是并行呢?并行的概念比较简单,并行总是和执行(executions)相关,很多东西同时执行就是并行;而并发则是通过一些方式组织你的程序,让...

    米开朗基杨
  • 测试开发进阶(三十七)

    ConfiguresSerializer里面用 InterfacesAnotherSerializer拿到的东西进行展示

    zx钟
  • 【AutoML】如何使用强化学习进行模型剪枝?

    大家好,欢迎来到专栏《AutoML》,在这个专栏中我们会讲述AutoML技术在深度学习中的应用,这一期讲述在模型剪枝中的应用。

    用户1508658
  • Spring Boot2 系列教程(二十六)Spring Boot 整合 Redis

    本系列第 24、25 两篇文章,分别是 Spring Boot+Jpa 以及 Spring Boot+Jpa 多数据源,不知触发了什么关键字,一直无法发送,找了...

    江南一点雨
  • 编写高质量的代码—Java开发中通用的方法和准则

    在Java开发过程中有很多通用的准则,遵守这些准则能够避免很多不必要的错误发生,让代码的质量更高,下面的内容为书籍第一章《Java开发中通用的方法和准则》的阅...

    Java编程指南
  • Redis 的底层数据结构(压缩列表)

    上一篇我们介绍了 redis 中的整数集合这种数据结构的实现,也谈到了,引入这种数据结构的一个很大的原因就是,在某些仅有少量整数元素的集合场景,通过整数集合既可...

    Single
  • 快速学习Linux-压缩与解压缩命令

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • HDU 1693 Eat the Trees 插头DP入门

    终于该来的还是得来~ 插头DP入门学习! HDU 1693 Eat the Trees

    ACM算法日常

扫码关注云+社区

领取腾讯云代金券