如何使用 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);

}

现在第一个上传没有发送 url 到 mongodb，但是第二个记录将前一个列表附加到记录中。例如，记录 2 将具有记录 1 的图像 urls。这是回购协议的 link。 https://github.com/Yousuf66/multiple_image_uplaod

Answer 1

您可以在上次上传时将 true 值传递给 addSuspectImage()。然后在 addSuspectImage() 函数中调用 addSuspect(imgList)，在将所有 URL 推送到 imgList 后调用 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);
  }
}

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

How to upload multiple images to cloudinary and send urls to another database using javascript

html

javascript

heroku

mongodb

cloudinary