Angularjs base64编码图像不显示

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

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

然而，这是我得到的

下面是获取给定图像并将其转换的代码

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);
    }
}]);

---

以

BinaryString

读取肯定会给您带来无法打印的字符。如果您希望它以base64编码（特别是显示为图像），那么您需要以

DataURL

的形式读取它。以下内容肯定会对您有所帮助：

r.readAsDataURL(f);

有关

FileReader

的更多信息，请咨询

---

这里是不同阅读类型的游戏。

谢谢您的回复，我将尝试一下并回复。你是angularJS开发人员吗？我试着使用$（“#img1”）.prop（“src”，data）；在我的angularJS中，但它给出了以下错误。ReferenceError:$未定义$（“#img1”）.prop（“src”，数据）；另外，如果您之前没有定义v，那么您如何检查v是否等于JS中第12行的某个值呢？是的，我正在研究和学习角度JS。现在谈谈你的第二个评论。1.我不认为这是一种有棱角的方式。若您将

imageUrl

设置为从文件读取的值（即

event.target.result

），它应该反映。2. <在调用

onLoAnded

之前，已经定义了code>v。有人可以通过使用闭包/变量作用域等来解释它……好吧，nvm，我太笨了，忘了我需要在html源代码中使用jQuery。非常感谢你的帮助，这个问题我已经研究了一段时间了。此外，是否有办法将图像缩放到最大高度/宽度？就像它必须始终在800x800边界内一样？我已经更新了fiddle，使用img元素的css类将高度/宽度设置为250px。你可以试试。