javascript - 在 Javascript 中将文件图像附加到 FormData(Http 请求)

Question

我在从 Ionic/Cordova 应用程序、javascript 将图像发布到 Web API 时遇到问题。我引用下面的链接 link

这是我的代码:

$http({
                        method: "POST",
                        url: url,
                          headers: {
                          //'Content-Type': 'multipart/form-data',
                          //'Content-Type': false,
                          //'Content-Type': undefined,
                          'Cache-Control': 'no-cache',
                          'DevicePassword': localStorage.getItem("UserPassword"),
                          'UserName': 'thuong'
                          },
                          transformRequest: function (data) {
                          var formData = new FormData();
                          formData.append("data", angular.toJson(data.data));
                          alert("sizeofImg: " + data.files.length);

                          for (var i = 0; i < data.files.length; i++) {
                                alert(data.files[i].ImgSrc);
                                var blob = dataURItoBlob(data.files[i].ImgSrc);
                                //var file = new File([blob], "file.png",{type: 'image/png');
                                formData.append("file" + i, blob, "filename" + i + "png");
                          }
                          return formData;
                          },
                          data: { data: jsonData, files: files }
                          })
             .then(function (result) {
                   alert("success" + result);
                   success(result);
            },
                   function (error) {
                   alert("error" + JSON.stringify(error));
                   failure(error);
                   }
            );

function dataURItoBlob(dataURI) {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0)
    byteString = atob(dataURI.split(',')[1]);
else
    byteString = unescape(dataURI.split(',')[1]);

// separate out the mime component
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
}

return new Blob([ia], {type:mimeString});

在那里，data.files[i].ImgSrc 是 base64 字符串。 (我使用了 Cordova Camera 插件来获取它)它开始像:data:image/png;base64, ...它总是陷入失败回调，状态代码:415(UnsupportMediaFile)。我像上面的链接一样实现了服务器端。dataURIToBlob 方法是否正确？请帮我。

Answer 1

追加上传文件见代码吹

$scope.updateProfile = function(form_data){
        console.log(form_data);
        $scope.submitted = true;
        $scope.reg = form_data;
         var fd = new FormData();
         var file = $scope.fileToUpload;
         fd.append('file',file);
         $http.post(API_URL+"user_update_profile", fd, {
             transformRequest: angular.identity,
             headers: {'Content-Type': undefined}
            })
            .success(function(res){
                 console.log(res);
            })
            .error(function(err){
                 console.log(err);
            });
    }

注意:fileToUpload变量是文件属性

   var file = $scope.fileToUpload;
     fd.append('file',file);