base64 格式的图像大小增加

Question

我有一个只接受图像的简单输入文件。我想在上传任何小于 2mb 大小的图像时显示成功消息。但是当我选择图像并检查元素时，图像正在转换为 base64 格式，并且 base64 字符串的大小超过（4/3 比率）图像的实际大小。

我的问题是
1.如何保持与实际图片大小一致？
2. 有没有其他办法解决。

我的代码是：

<input type="file" onchange="uploadImage(event)" />

jQuery

function uploadImage(event){
var fileReader = new FileReader();

if (fileReader && fileList && fileList.length) {
            $scope.fileSize = fileList[0].size;
            fileReader.readAsDataURL(fileList[0]);

            var ext = fileList1.value.match(/\.([^\.]+)$/)[1].toLowerCase();
            switch (ext) {
                case 'jpg':
                case 'bmp':
                case 'png':
                case 'tif':
                case 'jpeg':
                    $scope.hasInvalidFiles = false;
                    fileReader.onload = function (event) {

                        var imageData = event.target.result;
                        console.log(imageData);
                    }

                    if (fileList[0].size < 2000) {
                             console.log("success");
                    }
                    else {
                        console.log("Failure");
                    }
                    break;
                default:
                   console.log("Invalid");
            }
        }

}

Answer 1

function uploadImage(event) {
  var file = event.target.files[0]
  var fileReader = new FileReader();
  fileReader.readAsDataURL(file);
  fileReader.onload = function(e) {
    console.log(e.target.result)
    var imgBase = e.target.result;
    if (imgBase.split(',')[0].indexOf('base64') >= 0) {
      var result = imgBase.split(',')[1]; // This is the actual size.
    }
  }
  if (file.size < 2 * 1024 * 1024) {
    alert("Success");
  } else {
    alert("Failure");
  }
}

<input type="file" accept="image/png, image/jpeg" onchange="uploadImage(event)" />

如果您只想接受图像。您可以使用accpet 属性。另外，File对象中size值的单位是byte而不是kb。