Question

我正在尝试在JS中进行多个文件上传。

我在html中有这个输入

import httplib, urllib, base64

headers = {
    # Request headers
    'Content-Type': 'application/json',
    'Ocp-Apim-Subscription-Key': '{subscription key}',
}

params = urllib.urlencode({
    # Request parameters
    'userData': '{string}',
    'targetFace': '{string}',
})

try:
    conn = httplib.HTTPSConnection('westus.api.cognitive.microsoft.com')
    conn.request("POST", "/face/v1.0/persongroups/{personGroupId}/persons/{personId}/persistedFaces?%s" % params, "{body}", headers)
    response = conn.getresponse()
    data = response.read()
    print(data)
    conn.close()
except Exception as e:
    print("[Errno {0}] {1}".format(e.errno, e.strerror))

然后对于onChange事件执行

 <input type="file" (change)="fileChange($event,showFileNames)" multiple />

This.files 包含要上传的文件数组。

然后在按下“提交”后，这就是我要做的事情。这段代码取自之前类似线程的答案，但我仍然没有运气。

this.files = [].slice.call(event.target.files);
input.value = this.files;

变量name，ext和tripsToEditx是全局变量，我无法通过.this访问它们所以我用

upload() {
    for (var i = 0; i < this.files.length; i++) { //for multiple files       
         var that = this;
         (function (file) {   
             var name = file.name;
             var reader = new FileReader();

             let parts = file.name.split(".");
             that.filename = parts[0];

             if (typeof (parts[1]) != "undefined")
                  that.ext = "." + parts[1];
             else
                  that.ext = "";

             reader.onload = function (e) {
                 var x = this.result;
                 let fileJSON = { "Filename": that.filename, "Extension": that.ext, "DateCreated": new Date(), "Data": btoa(this.result), "Sguid": that.tripsToEditx.sguid };
                 console.log(fileJSON);
             }
             reader.readAsArrayBuffer(file);
        })(this.files[i]);
    }
}

无论如何，我仍然要将最后选择的文件打印3次。

任何想法如何解决？

Answer 1

btoa，在ArrayBuffer上没有做到你所期望的，... ~~但它确实适用于Uint8Array，所以如果我们创建一个ArrayBuffer视图，我们就可以btoa了。~~

下面是一个示例，选择一些文件，并在浏览器控制台中查看输出。

PS。如果你能let和const，你就不需要使用函数闭包，因为这些将为你处理。

＆＃13;

function arrayBufferToHex(buffer) {
  const view  = new Uint8Array( buffer );
  return Array.prototype.map.call(view, function(byte) {
    return ('0' + (byte & 0xFF).toString(16)).slice(-2);
  }).join('');
}


document.querySelector("input").onchange = function () {  
  for (let i = 0; i < this.files.length; i++) {
    const file = this.files[i];
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onloadend = function (e) {     
      const splits = file.name.split(".");
      const fileJSON = { 
        "Filename": splits[0], 
        "Extension": splits[1], 
        "DateCreated": new Date(), 
        "Data": arrayBufferToHex(this.result), 
        "Sguid": "XYZ" };
      console.log(fileJSON);
    }
  }
}

＆＃13;

<div>Open browser console, to see results.</div>
<br>

<input type="file" multiple />

＆＃13;

JS多文件上传返回循环的最后一个文件

1 个答案: