这在浏览器端 javascript 中是完全可能的。

简单的方法：

该readAsDataURL（）方法可能已经对其进行编码为base64为您服务。您可能需要删除开头的内容（直到第一个,），但这没什么大不了的。不过，这会带走所有的乐趣。

艰难的方式：

如果您想以艰难的方式尝试（或不起作用），请查看readAsArrayBuffer(). 这将为您提供一个 Uint8Array，您可以使用指定的方法。这可能仅在您想弄乱数据本身时才有用，例如在上传之前处理图像数据或执行其他巫术魔法。

有两种方法：

• 转换为字符串并使用内置的btoa或类似的
  • 我没有测试过所有情况，但对我有用 - 只需获取字符代码
• 直接从 Uint8Array 转换为 base64

我最近在浏览器中实现了tar。作为该过程的一部分，我制作了自己的直接 Uint8Array->base64 实现。我认为您不需要那个，但如果您想看一看，它就在这里；它很整洁。

我现在应该做什么：

从 Uint8Array 转换为字符串的代码非常简单（其中 buf 是 Uint8Array）：

function uint8ToString(buf) {
    var i, length, out = '';
    for (i = 0, length = buf.length; i < length; i += 1) {
        out += String.fromCharCode(buf[i]);
    }
    return out;
}

从那里，只需执行以下操作：

var base64 = btoa(uint8ToString(yourUint8Array));

Base64 现在将是一个 base64 编码的字符串，它应该只上传 peachy。如果你想在推送前仔细检查，试试这个：

window.open("data:application/octet-stream;base64," + base64);

这会将其下载为文件。

其他信息：

要将数据作为 Uint8Array 获取，请查看 MDN 文档：

• https://developer.mozilla.org/en/DOM/FileReader

我的解决办法是使用readAsBinaryString()和btoa()它的结果。

uploadFileToServer(event) {
    var file = event.srcElement.files[0];
    console.log(file);
    var reader = new FileReader();
    reader.readAsBinaryString(file);

    reader.onload = function() {
        console.log(btoa(reader.result));
    };
    reader.onerror = function() {
        console.log('there are some problems');
    };
}

我使用 FileReader 在不使用任何 Ajax 请求的情况下单击文件上传按钮来显示图像。以下是代码希望它可以帮助某人。

$(document).ready(function($) {
    $.extend( true, jQuery.fn, {        
        imagePreview: function( options ){          
            var defaults = {};
            if( options ){
                $.extend( true, defaults, options );
            }
            $.each( this, function(){
                var $this = $( this );              
                $this.bind( 'change', function( evt ){

                    var files = evt.target.files; // FileList object
                    // Loop through the FileList and render image files as thumbnails.
                    for (var i = 0, f; f = files[i]; i++) {
                        // Only process image files.
                        if (!f.type.match('image.*')) {
                        continue;
                        }
                        var reader = new FileReader();
                        // Closure to capture the file information.
                        reader.onload = (function(theFile) {
                            return function(e) {
                                // Render thumbnail.
                                    $('#imageURL').attr('src',e.target.result);                         
                            };
                        })(f);
                        // Read in the image file as a data URL.
                        reader.readAsDataURL(f);
                    }

                });
            });
        }   
    });
    $( '#fileinput' ).imagePreview();
});

灵感来自@Josef 的回答：

const fileToBase64 = async (file) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = (e) => reject(e)
  })

const file = event.srcElement.files[0];
const imageStr = await fileToBase64(file)

完整示例

html文件输入

<style>
.upload-button {
  background-color: grey;
}

.upload-button input{
  display:none;
}
</style>
<label for="upload-photo" class="upload-button">
    Upload file
    <input
     type="file"
     id="upload-photo"
    </input>
</label>

JS 处理程序

document.getElementById("upload-photo").addEventListener("change", function({target}){
 if (target.files && target.files.length) {
      try {
        const uploadedImageBase64 = await convertFileToBase64(target.files[0]); 
        //do something with above data string 
      } catch() {
        //handle error
      }
    }
})

function convertFileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = reject;
  });
}