手机页面需要做上传，考虑到file提交问题多，所以用ajax提交base64位图片信息，到后台保存。问题来了，小图片都没问题，但是4M左右的图片，base64位之后ajax传过去，大概20秒左右才响应回来，大家有没有好办法解决？

手机上传问题

某熊猫桑

16.1k61547

发布于
2017-01-21

✓ 已被采纳

不知道你的图片是什么用途，但是移动端图片一般来说是不需要这么大的，建议你先在前端压缩一下再上传，避免原图可能会携带色彩配置、GPS等冗余信息，保持图片在1M以内大概效果会比较可以接受~

Cyber_Cynic

2.3k1824

发布于
2017-01-21

同意楼上的，移动端有这个上传大文件需求，就要重新考虑一下了

速速

621

发布于
2017-01-21

手机端图片上传，可以用h5 canvas适当的压缩处理，再上传，ajax异步图片大的话确实上传很慢。

羊爸爸

93521626

发布于
2017-01-22

如果是用户的照片可以用h5 canvas压缩后上传
如果一定要保持原比例上传，做个上传界面加进度条
https://segmentfault.com/a/11...
http://www.jb51.net/article/9...
供参考

superAdmin

9102623

发布于
2017-01-22

随手上一份 H5图片预览+canvas压缩+base64格式转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
    <input type="file" id="img">
    <p>原生图片预览</p>
    <img src="" alt="" id="preview" >
    <p>压缩后图片预览</p>
    <img src="" alt="" id="preview_compressed" >
</body>
</html>
<script>

    $("#img").change(function(){
        //预览
        var fr = new FileReader();
        fr.readAsDataURL(this.files[0]);
        fr.onload = function(e) {
            var base64Url = e.target.result;
            $('#preview').attr('src', base64Url);
            compress(base64Url); 
        };
    })

    //压缩并获得base64编码
    function compress(url){
        var img = new Image();
        img.src = url;
        img.onload = function(){
            var canvas = document.createElement('canvas');
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            canvas.getContext("2d").drawImage(img, 0, 0);
            var compressedBase64 = canvas.toDataURL('image/jpeg', 0.5); //0.5为压缩质量
            $('#preview_compressed').attr('src', compressedBase64) //这个就是压缩后的base64
        }
    }

</script>

手机上传问题

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？

前端有没有办法实现页面截图？