Загрузить файл на s3 из vuejs и бэкэнда Django

Question

Я хотел бы сгенерировать подписанный URL в Django, отправить его во внешний интерфейс с помощью Axios Ajax, а затем с помощью этого URL загрузить файл непосредственно из Vue JS в S3. В следующем коде, когда пользователь нажимает кнопку загрузки - вызывается метод Vue uploadButtonClicked, который вызывает функцию Django ajaxSendPresignedUrlForS3, которая генерирует предопределенный URL-адрес поста. Этот URL передается обратно в vue uploadButtonClicked, а затем вызывается метод vue uploadFile.

Пока генерация URL успешна. Но при отправке файла в корзину S3 я получаю ошибку Error: Request failed with status code 403. Я читал и вносил некоторые изменения в код, что приводит к новым ошибкам, таким как 412, 405 и т. Д.

Код Джанго

def ajaxSendPresignedUrlForS3(request):
    input=json.loads(request.body.decode('utf-8')); print('ajaxSendPresignedUrlForS3');
    S3_BUCKET = os.environ.get('S3_BUCKET')
    file_name = input['file_name'][0]
    file_type = input['file_type'][0]
    s3 = boto3.client('s3',
            aws_access_key_id=os.environ.get('AWS_ACCESS_KEY_ID'),
            aws_secret_access_key=os.environ.get('AWS_SECRET_ACCESS_KEY'),
            region_name='us-east-2',
            config=Config(signature_version='s3v4'),
            )
    presigned_post = s3.generate_presigned_post(
            Bucket = S3_BUCKET,
            Key = file_name,
            Fields = {"Content-Type": 'multipart/form-data'},
            Conditions = [{"Content-Type": 'multipart/form-data'}],

            ExpiresIn = 300 #seconds
    )
    return JsonResponse({'data': presigned_post})

Javascript Vue code

Метод Vue 1:

uploadButtonClicked:function(){ //gettting presigned POST URL from django
          console.log('uploadButtonClicked');
          //call axios ajax to get presigned URL from django and then upload file to s3 using axios func "upLoadFile"
          axios({
                method: 'post',
                baseURL: window.location.origin, //we need base url coz this ajax can be called from any page on timeout
                url: 'main/ajaxSendPresignedUrlForS3/',
                data: {
                      file_name: this.inputFilesName,
                      file_type: this.inputFilesType,
                    },
                responseType: 'json', //server will response with this datatype
              })
              .then ( function (response){
                  data=response.data;
                  console.log('uploadButtonClicked succes. data =',data ); //works
                  this.upLoadFile(data); //upload file to S3

              }.bind(this))
              .catch ( function (error){
                console.log('uploadButtonClicked error=',error);
              });

      },

Метод Vue 2:

upLoadFile:function(data){ //upload file directly to s3
          console.log('upLoadFile')
          var postData = new FormData(); //its type to JS inbuilt form
          console.log('data.data.fields=',data.data.fields,'\nKeys =')
          for(key in data.data.fields){
              console.log(key);
              postData.append(key, data.data.fields[key]);
          }
          postData.append('file', document.getElementById('id_inputButtonReal').files[0]);
          console.log('postData=',postData)
          axios({
                method: 'get',
                url: data.data.url+new Date().getTime(),
                data: {
                      postData: postData,
                    },
                // responseType: 'json', //server will response with this datatype
              })
              .then ( function (response){
                  data=response.data;
                  console.log('upLoadFile success');

              }.bind(this))
              .catch ( function (error){
                console.log('upLoadFile error=',error);
              });
      },

Мне удалось загрузить файл на s3 напрямую из Django. Что, вероятно, означает, что моя часть Python верна:

    from boto3.s3.transfer import S3Transfer
    myfile='/home/user/img1.jpg';
    transfer = S3Transfer(s3); #s3 is declared in above code
    transfer.upload_file(myfile, S3_BUCKET,'snake2.jpg') ; print('upload successful');

Спасибо

Answer 1

Объяснение ошибки: Я отправлял данные на S3 в виде словаря словаря. S3 любит прямой постДанных.

Над кодом Django все в порядке. Я объединил код Javascript в уменьшенную версию ниже для понимания.

  uploadButtonClickedforStackoverflow:function(){ //gettting presigned POST URL from django and then uploading file to S3 using that url
      axios({
            method: 'post',
            baseURL: window.location.origin, //we need base url coz this ajax can be called from any page on timeout
            url: 'main/ajaxSendPresignedUrlForS3/',
            data: { file_name: 'snake.jpg' },//sending filename to django so it can build a presigned POST URL granting frontend permission to upload
            responseType: 'json', //server will response with this datatype
          })
          .then ( function (response){
              presigned_post=response.data
              var postData = new FormData(); //its type to JS inbuilt form
              for(key in presigned_post.fields){ //appending all keys sent by django to our JS FormData object
                    postData.append(key, presigned_post.fields[key]);
              }
              var file=document.getElementById('id_inputButtonReal').files[0]; //id_inputButtonReal is id of HTML input element
              postData.append('file', file);
              axios({
                    method: 'post',
                    url: presigned_post.url,
                    data: postData, //dont sent data as {data:postData}, instead S3 likes it just by itself
                    })
          });

  },