如何使用带有预签名URL的vuejs将文件发送到S3？

Question

我想使用vuejs将文件上传到minio。

因此，我已将以下代码添加到vue项目

<template>
<div class="app-container">


<h1>Minio Code</h1>
<input type="file" id="selector" multiple>
<button v-on:click="upload()">Upload</button>

<div id="status">No uploads</div>

</div>

</template>

<script>
import $ from 'jquery'
    export default
    {
        name: 'presigned',
[.......]
        methods:
        {
              upload()
            {
                 [$('#selector')[0].files].forEach(fileObj =>

                {
                    var file = fileObj[0]
                    // Retrieve a URL from our server.

                    this.retrieveNewURL(file, url =>
                    {
                        // Upload the file to the server.

                        this.uploadFile(file, url)
                    })
                })
            },

            // Request to our Node.js server for an upload URL.
            retrieveNewURL(file, cb)
            {
                $.get(this.$baseUrl + `upload/presigned?filename=${file.name}`, (url) =>
                {
                    cb(url)
                })
            },

            // Use XMLHttpRequest to upload the file to S3.
            uploadFile(file, url)
            {
                console.log(url)
                var xhr = new XMLHttpRequest()
                xhr.open('PUT', url, true)
                xhr.send(file)
                xhr.onload = () =>
                {
                    if (xhr.status == 200)
                    {
                        $('#status').text(`Uploaded ${file.name}.`)
                    }
                }
            }

        }
    }
</script>

这是迷你页面here中教程的修改后的代码。但是，当我单击上载按钮时，我只会收到404错误

PUT http://localhost:9528/[object%20Object] 404 (Not Found)

我还需要添加什么才能将文件直接上传到minio。