javascript - 如何使用 javascript 将多个图像上传到 cloudinary 并将 url 发送到另一个数据库

Question

这是我第一次发帖，所以请原谅我的错误。 我正在尝试将多张图片上传到 cloudinary，将 url 保存在一个数组中，并将它们与其余的表单数据一起发送到 mongodb(一条记录包含多张图片)。 我无法弄清楚如何仅在上传所有图像并将 url 存储在数组中后才调用 mongodb 函数。

我尝试了 setTimeout 来等待所有的 url 但没有成功

函数文件输入(){

var fileInput  = document.getElementById('sus-img');
 var fileList =[];

   for(var i=0;i<fileInput.files.length;i++){
     fileList.push(fileInput.files[i]);
    }
   for(i=0;i<fileList.length;i++){
    //this function uploads the file to cloudinary
     addSuspectImage(fileList[i]);
   }
   //passing the list to the mongodb upload function
   addSuspect(imgList);

现在第一次上传没有向 mongodb 发送 url，但是第二个记录将前一个列表附加到记录中。 例如，记录 2 将具有记录 1 的图像 url。 这是 repo 协议(protocol)的链接。 https://github.com/Yousuf66/multiple_image_uplaod

Answer 1

您可以在上次上传时将 true 值传递给 addSuspectImage()。然后在将所有 URL 推送到 imgList 之后，在 addSuspectImage() 函数中调用 addSuspect(imgList)。

像这样:

 function fileInput(){

    var fileInput  = document.getElementById('sus-img');
     var fileList =[];
     // let count = 0;
     var isLastUpload=false;
       for(var i=0;i<fileInput.files.length;i++){
         fileList.push(fileInput.files[i]);
        }
       for(i=0;i<fileList.length;i++){
         console.log(fileList[i]);
          if(i==fileInput.filesList.length-1){
              isLastUpload=true;
            } 
         addSuspectImage(fileList[i], isLastUpload);
       }
   }

  function addSuspectImage(file,isLastUpload){

   {console.log(file);

    var url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`;
    var xhr = new XMLHttpRequest();
    var fd = new FormData();

    xhr.open('POST', url, true);
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');


    xhr.onreadystatechange = function(e) {
      if (xhr.readyState == 4 && xhr.status == 200) {
        // File uploaded successfully

        // var response = JSON.parse(xhr.responseText);
      var response = JSON.parse(xhr.responseText);
      console.log(response);


      console.log("uploaded");
        // https://res.cloudinary.com/cloudName/image/upload/v1483481128/public_id.jpg


      var url = response.secure_url;
      console.log(url);
      imgList.push(url);

      }

     if(isLastUpload){
        addSuspect(imgList);
       }
    };
       fd.append('upload_preset', unsignedUploadPreset);
       fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
    fd.append('file', file);
    xhr.send(fd);
  }
}