minio js HTML 浏览器文件上传

老项目想用minio 但是无奈minio都是npm管理的包对于我只要在页面上传文件的人很苦恼
找了好久终于找到个可以用的文章如下
MinIO分布式存储方案预研
http://www.hushowly.com/articles/2106
改成自己的minio配置即可上传也上传成功图片文件查看也没有问题

项目github地址
https://github.com/davideliason/s3upload
https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html
亚马逊文档地址
用到的方法是putObject

    !DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0" />
    <title>s3 Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.19.0.min.js"></script>
    </head>
    <body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>

<script type="text/javascript">    
    // set variables for click handlers
    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');

    button.addEventListener('click', function () {
        var file = fileChooser.files[0];
        debugger;
        if (file) {            
            AWS.config.update({
                "accessKeyId": "AJEDFDFDFDFDFDF",
                "secretAccessKey": "SJEDFDFDFDFDKKK",
                "s3ForcePathStyle": true,
                "region": "us-west-2",
                "endpoint":"http://172.17.0.2:9000",
                "signatureVersion":"v4"
            });
            var s3 = new AWS.S3();
            var params = {
                Bucket: 'demo',
                Key: file.name,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };        
            s3.putObject(params, function (err, res) {
                if (err) {
                    results.innerHTML = ("Error uploading data: ", err);
                } else {
                    results.innerHTML = ("Successfully uploaded data");
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
</script>

</body>
</html>

最后编辑于：2022.09.28 11:24:05