14

ブラウザからs3アマゾンにファイルをアップロードしようとしています。バケットの投稿を許可するようにCORSポリシールールを変更しましたが、エラーが発生します

    <?xml version="1.0" encoding="UTF-8"?>
    <Error><Code>InvalidArgument</Code><Message>Bucket POST must contain a field named 'key'.  If it is specified, please check the order of the fields.</Message>
<ArgumentValue></ArgumentValue><ArgumentName>key</ArgumentName><RequestId>1E0A8DC78C0CEA9A</RequestId><HostId>XN38Qje9hUrGqHNIhtT8CtowX9tXlpyfEoaXb1UNxlsyLOWreh2mKqKVXg1zjLVl</HostId></Error>

これが私のリクエストとレスポンスです。このエラーが発生することで、キーパラメータを正しい順序で渡しています。

http://screencast.com/t/9ZUQO0s9d

http://screencast.com/t/CL8MKq6l6

誰かがそれの何が問題なのか教えてもらえますか、私はFormDataを使用してリクエストを送信しています

どんな助けでも大歓迎です。

ありがとう

編集：ここにコードplsチェックがあります

var form_data = new FormData();         
                form_data.append('file',hdlr.file);
                //form_data.append('crop_type',settings.get_cropped_type());
                //form_data.append('attributes',JSON.stringify(file_attr));
                $('input:hidden',$form).each(function(){

                    form_data.append(this.name,this.value);

                });


                //finally post the file through AJAX  
                var xhr = new XMLHttpRequest();  
                xhr.open("POST", $form[0].action, true);  
                xhr.send(form_data);

ここに画像の説明を入力してください

4

2 に答える 2

46

ファイルフォームフィールドがリクエストの最初に表示されているようです。回答にリクエストペイロード全体が含まれていないため、はっきりとはわかりませんが、これは「キー」フィールドのすぐ上に表示されているようです。AWSは、ファイルフィールドの後のリクエスト内のすべてのフィールドを無視するため、他のすべてのフィールドはファイルの前に表示される必要があります。

于 2013-03-05T23:04:46.440 に答える
0

ありがとうレイ・ニコラス

わたしにはできる。

{
  "formAttributes": {
    "action": "https://**.s3.ap-southeast-1.amazonaws.com",
    "method": "POST",
    "enctype": "multipart/form-data"
  },
  "formInputs": {
    "acl": "public-read",
    "key": "users/2/images/drops-of-water-578897_640.jpg",
    "X-Amz-Credential": "**",
    "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
    "X-Amz-Date": "**",
    "Policy": "**",
    "X-Amz-Signature": "**"
  }
}

function uploadFile(event) {
  event.preventDefault();

  getSignedPost().then(() => {
    const fileEl = document.getElementById('id-file');
    const file = fileEl.files[0];

    const formData = new FormData();
    Object.keys(uploadCredentials.formInputs).forEach((key) => {
      formData.append(key, uploadCredentials.formInputs[key]);
    });

    // update key to file name
    const key = `users/2/images/${file.name}`;
    formData.set('key', key);
    uploadCredentials.formInputs.key = key;

    // update show data on page
    const el = document.getElementById('id-upload-info');
    el.innerText = JSON.stringify(uploadCredentials, null, 2);

    // IMPORTANCE: https://stackoverflow.com/a/15235866
    // AWS ignores all fields in the request after the file field, so all other fields must appear before the file.
    formData.append('file', file);

    fetch(uploadCredentials.formAttributes.action, {
      method: uploadCredentials.formAttributes.method,
      // headers: {
      //   'Content-Type': 'multipart/form-data',
      // },
      body: formData,
    })
      .then((res) => {
        if (res.status === 204) {
          console.log('Successfully uploaded file');
          console.log('-- 204 - no content');

          return `Successfully uploaded file: ${key}`;
        }

        if (res.ok) {
          return res.json();
        } else {
          return res.text();
        }
      })
      .then((res) => {
        alert(JSON.stringify(res, null, 2));
      })
      .catch((err) => {
        alert(err.message || err);
      });
  });
}
于 2021-08-23T17:27:25.723 に答える