Question

所以我正在测试我的代码，看看我上传的图片是否已成功转换为base64。当我发出警报（数据）时，我发现这是一堆乱七八糟的未知字符。我想让弹出消息包含base64字符串，以便我可以将它放入在线base64解码器中以确认上传的图像是否正确。

之后我想将文件名+ base64字符串提供给我的php脚本，然后将其写入服务器。

然而，这就是我得到的

http://i.imgur.com/LhqdNxv.png

这是应该拍摄给定图像并将其转换的代码。

var app = angular.module("app", ["ui.bootstrap"]);

//http://stackoverflow.com/questions/18571001/file-upload-using-angularjs
app.factory('API', function ($http) {   
    return {
    uploadImage: function (image) {
        return $http.post('/js/upload.php', image);
    }
    }
});

app.controller('MainController',['$scope', '$http', 'API', function($scope, $http, API) {
    $scope.imageUrl = "";
    $scope.template = "";
    $scope.templates = [];

    $scope.templates.push("select an option...");
    $scope.templates.push("MakeGray");
    $scope.templates.push("Canny");
    $scope.templates.push("HSV");

    $scope.template = $scope.templates[0];

    $scope.add = function() {

    var f = document.getElementById('fileToUpload').files[0];  // name of image
    var files = document.getElementById('fileToUpload').files;
    var r = new FileReader();

    r.onload = function(event){
        console.log(event.target.result);
    }

    r.onloadend = function(e) {

        var data = e.target.result;
        alert(data);

        var formData = new FormData();

        formData.append("fileToUpload", f,f.name);

        API.uploadImage(formData)
        .success(function (imgUrl) {
            $scope.imageUrl = imgUrl;
        })
        .error (function (error) {
        });
    }

    r.readAsBinaryString(f);
    }
}]);

Answer 1

阅读BinaryString肯定会给你不可打印的字符。如果您希望将其作为base64编码（特别是显示为图像），则需要将其读作DataURL。以下一定会对您有所帮助：

r.readAsDataURL(f);

有关FileReader的更多信息，请咨询 MDN docs 。

这是使用 fiddle 来播放不同的阅读类型。

base64编码的图像不显示

1 个答案: