Как загрузить файл на s3, используя предварительно заданный URL в nuxt js? - PullRequest
Новая
       4

Как загрузить файл на s3, используя предварительно заданный URL в nuxt js?

0 голосов
/ 10 января 2020

Я пытаюсь разработать приложение, которое может загрузить файл в корзину s3, используя nuxt js и без сервера в качестве бэкэнда (для получения предварительно подписанного URL-адреса). Но мне трудно понять, как использовать его в передней части. Я пытался использовать vue -dropzone, он не работал. Теперь я хочу попробовать еще раз с самым базовым c на внешнем интерфейсе. Я использую Ax ios для http звонков. Я знаю, что должен использовать метод PUT

. Ниже приводится конечная точка без сервера для генерации предварительно подписанного URL-адреса s3 

module.exports.requestUploadURL = (event, context, callback) => {
      context.callbackWaitsForEmptyEventLoop = false;
      var s3 = new AWS.S3();

      const _body = multipart.parse(event, true);
      const textResponseHeaders = {
        "Content-Type": "text/plain"
      };
      const jsonResponseHeaders = {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": true
      };

      if (!_body.hasOwnProperty("contentType")) {
        callback(null, {
          statusCode: 501,
          headers: textResponseHeaders,
          body: "Missing Content Type"
        });
      }

      if (!_body.hasOwnProperty("filePath")) {
        callback(null, {
          statusCode: 501,
          headers: textResponseHeaders,
          body: "Missing File Path"
        });
      }

      var s3Params = {
        Bucket: "rasarecipe-img",
        Key: _body.filePath,
        Expires: 3600,
        ContentType: _body.contentType,
        ACL: "public-read-write"
      };

      var uploadURL = s3.getSignedUrl("putObject", s3Params);

      callback(null, {
        statusCode: 200,
        headers: {
          "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify({url : uploadURL})
      });
    }

. Ниже приводится код внешнего интерфейса, который я использую 

 handleDrop(e) {
      e.preventDefault();
      var dt = e.dataTransfer;
      var files = dt.files;
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();
        reader.addEventListener("loadend", e => {
          let data = new FormData();
          data.append('filePath', file.name);
          data.append('contentType', file.type);
          this.$axios
            .$post("/requestUploadURL", data)
            .then(function(response) {
              return response;
            })
            .then(json => {
              return this.$axios.$put(json.url,file);
            })

        });
        reader.readAsArrayBuffer(file);
      }
      return false;
    }
.
...