Question

我尝试过实现在axios中上传多个文件的超级方式。但不知何故，我在控制台中收到错误

无法加载https://api.cloudinary.com/v1_1/xxxx/image/upload：请求标头字段不允许授权预检响应中的Access-Control-Allow-Headers。

我的上传处理程序如下所示

  uploadFile(){
      const uploaders = this.state.filesToBeSent.map(file => {
             const formData = new FormData();
             formData.append("file", file);
             formData.append("upload_preset", "xxxxx"); 
             formData.append("api_key", "xxxxx");
             formData.append("timestamp", (Date.now() / 1000) | 0);

             return axios.post(url, formData, {
               headers: { "X-Requested-With": "XMLHttpRequest" },
             }).then(response => {
               const data = response.data;
               const fileURL = data.secure_url 
               console.log(data);
             })
         });

    // Once all the files are uploaded
    axios.all(uploaders).then(() => {
      // ... perform after upload is successful operation
      console.log("upload completed ", uploaders);
    });
  }

我从here

得到了这个例子

另一件事让我很困惑。在superagent中，我们可以将参数附加到请求字段，其中包括Cloudinary的API密钥，如下所示：

     const paramsStr = 'timestamp='+timestamp+'&upload_preset='+uploadPreset+secretKey;
     const signature = sha1(paramsStr);

      const params = {
        'api_key': 'xxxx',
        'timestamp': timestamp,
       'upload_preset': uploadPreset,
        'signature': signature
     }

      Object.keys(params).forEach(key => {
        uploadRequest.field(key, params[key])
      });

但是在那个例子中，没有提到如何将秘密密钥和其他参数附加到axios。

Answer 1

您需要在后端生成签名，然后使用生成的签名执行上载。您可以通过以下说明生成签名 - https://support.cloudinary.com/hc/en-us/articles/203817991-How-to-generate-a-Cloudinary-signature-on-my-own-

您还可以查看以下有关如何将签名附加到请求的示例。但是，在PHP中，指南仍然适用。 https://gist.github.com/taragano/a000965b1514befbaa03a24e32efdfe5

在React中使用Axios将多个文件上载到Cloudinary

1 个答案: