Javascript imgurl上的xhr html文件上载给出了错误的请求

我想上传一个图像到imgur使用他们的API；使用javascript（node.js）。 我总是得到这样的回答：

{“数据”：{“错误”：“图像格式不受支持，或图像已损坏。”，“请求”：“/3/upload”，“方法”：“POST”}，“成功”：false，“状态”：400}

以下是我编写的代码：

ImgUrlHelper = 
{
InitUploadValidateFile :function(element)
{
     var file = element.value;
     if(file === "")
        return;

     if(file != '')
     { 
         var valid_extensions = /(.jpg|.jpeg|.gif|.png)$/i;   
          if(valid_extensions.test(file))
          {
                console.log("ok");
                this.Upload(file);
          }
          else
                console.log("notok");
     }
     else
        console.log("notok");
},           

Upload: function(file) {

    var fd = new FormData(); 
    fd.append("image", file); 
    var xhr = new XMLHttpRequest(); 

    xhr.open("POST", "https://api.imgur.com/3/upload", true); 
    xhr.onload = this.OnLoad;
    xhr.onerror = this.OnNetworkError;
    xhr.onreadystatechange = this.OnReadyStateChange;
    xhr.onprogress= this.OnProgress;

    xhr.setRequestHeader('Authorization', 'Client-ID xxxxxxxxxxxx');
    xhr.send(fd);
},

OnReadyStateChange:function(xhr){
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        var link = JSON.parse(xhr.responseText).data.link;
        console.log(link);    
    }
    if(xhr.status != 200)
    {
        console.log(xhr.status);


        //log error
    }
},

OnNetworkError:function(xhr)
{
    //log error
    console.log("network error while uploading.");
    console.log(xhr);
},

OnProgress : function(e)
{
    if (e.lengthComputable) {
      var percentComplete = (e.loaded / e.total) * 100;
      console.log(percentComplete + '% uploaded');
    }
},

OnLoad :  function(res) {

}
}

我通过对输入type=“file”使用onchange事件来调用它：

我假设读取我使用文件上载控件选择的文件时出现问题，如下所示：

fd.append("image", file); 

---

此时，文件包含字符串：“C:\fakepath\img.jpg”。我可能需要对图像进行编码吗？

您应该上传一个

文件

对象，而不是字符串

更改

var文件=element.value

to

var file=element.files[0]：

// assuming that element is an <input type=file>
InitUploadValidateFile: function(element) {
    var file = element.files[0];
    if (!file)
        return;

    var valid_extensions = /(\.jpg|\.jpeg|\.gif|\.png)$/i;
    if (valid_extensions.test(file.name)) {
        console.log("ok");
        this.Upload(file);
    } else {
        console.log("notok");
    }
},

//假设元素是
InitUploadValidateFile:函数（元素）{
var file=element.files[0]；
如果（！文件）
返回；
var valid|u extensions=/（\.jpg\.jpeg\.gif\.png）$/i；
if（有效的_extensions.test（file.name））{
控制台日志（“ok”）；
上传（文件）；
}否则{
控制台日志（“notok”）；
}
},

// assuming that element is an <input type=file>
InitUploadValidateFile: function(element) {
    var file = element.files[0];
    if (!file)
        return;

    var valid_extensions = /(\.jpg|\.jpeg|\.gif|\.png)$/i;
    if (valid_extensions.test(file.name)) {
        console.log("ok");
        this.Upload(file);
    } else {
        console.log("notok");
    }
},