0

我正在尝试创建一个上传网页以将 csv 文件放入 S3 存储桶中。我按照他们网站上的教程进行操作。https://aws.amazon.com/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/

我修改了接受参数文件名的方法。一切正常，但找不到将文件从 html 上传到 S3 的方法。

我通常是后端 pythonist 和谷歌来更改这个网页/js，但我没有设法解决它。

我试图从 reader.readAsDataURL(file) 更改为 reader.readAsText(file, 'UTF-8')，也将 data:image/jpg 更改为 data:text/csv 或 text/plain 但在线需要“包含”返回“长度：假”

console.log('length: ', e.target.result.includes('data:image/jpeg'))

下来你可以找到我的新代码，如果你能重定向我如何发送 csv 文件以及 API 中的“？文件名=原始文件名”的一些线索，我真的很爱你 :)。

<!DOCTYPE html>
<html>
<head>
    <title>Upload file to S3</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>S3 Uploader Test</h1>

    <div v-if="!file">
        <h2>Select a file</h2>
        <input type="file" @change="onFileChange">
    </div>
    <div v-else>
        <img :src="file" />
        <button v-if="!uploadURL" @click="removeFile">Remove file</button>
        <button v-if="!uploadURL" @click="uploadFile">Upload file</button>
    </div>
    <h2 v-if="uploadURL">Success! File uploaded to bucket.</h2>
</div>

<script>
    const MAX_FILE_SIZE = 1000000

    /* ENTER YOUR ENDPOINT HERE */

    const API_ENDPOINT = 'https://<smth>.execute-api.eu-central-1.amazonaws.com/uploads'
    // e.g. https://ab1234ab123.execute-api.us-east-1.amazonaws.com/uploads

    new Vue({
        el: "#app",
        data: {
            file: '',
            uploadURL: ''
        },
        methods: {
            onFileChange (e) {
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                this.createFile(files[0])
            },
            createFile (file) {
                // var image = new Image()
                let reader = new FileReader()
                reader.readAsText(file, 'UTF-8');
                reader.onload = (e) => {
                    //console.log(e.target.result)
                    console.log('length: ', e.target.result.includes('data:/csv'))
                     if (!e.target.result.includes('data:text/csv')) {
                       return alert('Wrong file type', e.target.result)
                    }
                    if (e.target.result.length > MAX_FILE_SIZE) {
                        return alert('File is loo large.')
                    }
                    this.file = e.target.result
                }
                // reader.readAsDataURL(file)
            },
            removeFile: function (e) {
                console.log('Remove clicked')
                this.file = ''
            },
            uploadFile: async function (e) {
                console.log('Upload clicked')
                // Get the presigned URL
                const response = await axios({
                    method: 'GET',
                    url: API_ENDPOINT+'?filename='+'last.csv'
                })
                console.log('Response: ', response)
                console.log('Uploading: ', this.file)
                let binary = atob(this.file.split(',')[1])
                let array = []
                for (var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i))
                }
                let blobData = new Blob([new Uint8Array(array)], {type: 'text/csv'})
                console.log('Uploading to: ', response.uploadURL)
                const result = await fetch(response.uploadURL, {
                    method: 'PUT',
                    body: blobData
                })
                console.log('Result: ', result)
                // Final URL for the user doesn't need the query string params
                this.uploadURL = response.uploadURL.split('?')[0]
            }
        }
    })
</script>
<style type="text/css">
    body {
        background: #20262E;
        padding: 20px;
        font-family: sans-serif;
    }
    #app {
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        transition: all 0.2s;
        text-align: center;
    }
    #logo {
        width: 100px;
    }
    h2 {
        font-weight: bold;
        margin-bottom: 15px;
    }
    h1, h2 {
        font-weight: normal;
        margin-bottom: 15px;
    }
    a {
        color: #42b983;
    }
    img {
        width: 30%;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
</style>
</body>
</html>

4

2 回答 2

1

在创建使用脚本标签的静态网站时，请考虑使用适用于 JavaScript 的 AWS 开发工具包将对象放入 Amazon S3 存储桶中。AWS Developer Guide for JavaScript SDK Version 3中介绍了上传对象。

从浏览器将照片上传到 Amazon S3

（当然，对于您的用例，用 CSV 文件替换照片文件）。

于 2021-08-11T12:58:33.330 回答
0

感谢@smac2020 的指导，仍然非常有用，我没有机会进一步研究它。经过几个小时的 vue.js 学习，制作了这个工作代码。

<!DOCTYPE html>
<html>
<head>
    <title>Upload file to S3</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios@0.2.1/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h1>S3 Uploader Test</h1>

    <div v-if="!file">
        <h2>Select a file</h2>
        <input type="file" @change="onFileChange">
    </div>
    <div v-else>
        <div>File {{ name }} loaded </div>
        <button v-if="!uploadURL" @click="removeFile">Remove file</button>
        <button v-if="!uploadURL" @click="uploadFile">Upload file</button>
    </div>
    <h2 v-if="uploadURL">Success! File uploaded to bucket.</h2>
</div>

<script>
    const MAX_FILE_SIZE = 1000000

    /* ENTER YOUR ENDPOINT HERE */
    const API_ENDPOINT = 'https://<smth>.execute-api.eu-central-1.amazonaws.com/uploads'
    // e.g. https://ab1234ab123.execute-api.us-east-1.amazonaws.com/uploads

    new Vue({
        el: "#app",
        data: {
            file: '',
            uploadURL: '',
            name: ''
        },
        methods: {
            onFileChange (e) {
                let files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                this.createFile(files[0])
            },
            createFile (file) {
                let reader = new FileReader()
                this.name = file.name
                console.log(this.name)
                reader.readAsText(file, 'UTF-8');
                reader.onload = (e) => {
                    if (e.target.result.length > MAX_FILE_SIZE) {
                        return alert('File is loo large.')
                    }
                    this.file = e.target.result
                }
            },
            removeFile: function (e) {
                console.log('Remove clicked')
                this.file = ''
            },
            uploadFile: async function (e) {
                console.log('Upload clicked', this.name)
                // Get the presigned URL
                const response = await axios({
                    method: 'GET',
                    url: API_ENDPOINT+'?filename='+this.name
                })
                console.log('Response: ', response)
                let blobData = new Blob([this.file], {type: 'text/csv'})
                console.log('Uploading to: ', response.uploadURL)
                const result = await fetch(response.uploadURL, {
                    method: 'PUT',
                    body: blobData
                })
                console.log('Result: ', result)
                // Final URL for the user doesn't need the query string params
                this.uploadURL = response.uploadURL.split('?')[0]
            }
        }
    })
</script>
<style type="text/css">
    body {
        background: #20262E;
        padding: 20px;
        font-family: sans-serif;
    }
    #app {
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        transition: all 0.2s;
        text-align: center;
    }
    #logo {
        width: 100px;
    }
    h2 {
        font-weight: bold;
        margin-bottom: 15px;
    }
    h1, h2 {
        font-weight: normal;
        margin-bottom: 15px;
    }
    a {
        color: #42b983;
    }
    img {
        width: 30%;
        margin: auto;
        display: block;
        margin-bottom: 10px;
    }
</style>
</body>
</html>

于 2021-08-11T13:35:14.023 回答