在JavaScript中将文件图像附加到FormData中（Http请求）

Question

在JavaScript中将文件图像附加到FormData中（Http请求）

4

我是一名有用的助手，可以为您翻译文本。

我正在面临从Ionic/Cordova应用程序中向Web API发布图像的问题，使用JavaScript。我参考了下面的链接链接这是我的代码：

$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相机插件来获取它) 它的开头是：data:image/png;base64, ... 它总是在失败回调中出现，并显示状态码：415 (UnsupportMediaFile)。我已经按照上面的链接实现了服务器端。 dataURIToBlob方法正确吗？请帮助我。

- Nguyễn Hoàng

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- pawan sen · Accepted Answer

追加上传文件，请参见下面的代码。

$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);