Giter VIP home page Giter VIP logo

oss-in-browser's Introduction

OSS in Browser

Play with OSS right in the browser!

Demo

Browser support

  • IE >= 10 & Edge
  • Major versions of Chrome/Firefox/Safari
  • Major versions of Android/iOS/WP

Setup

Bucket setup

As browser-side javascript involves CORS operations. You need to setup your bucket CORS rules to allow CORS operations:

  • set allowed origins to '*'
  • allowed methods to 'PUT, GET, POST, DELETE, HEAD'
  • set allowed headers to '*'
  • expose 'ETag' in expose headers

STS setup

As we don't want to expose the accessKeyId/accessKeySecret in the browser, a common practice is to use STS to grant temporary access.

App setup

Fill in your appServer address and bucket name in app.js:

var appServer = '<your STS app server>';
var bucket = '<your bucket name>';
var region = 'oss-cn-hangzhou';

And then open index.html in your browser.

STS App server

A sample app server can be found here.

IE Compatibility

You may need include the promise polyfill for IE:

<script src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script>

oss-in-browser's People

Contributors

rockuw avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

oss-in-browser's Issues

请问关于MUI如何使用

请问,我使用了MUI框架(一个H5框架),本身不兼容ES6语法,我应该如何使用客户端直接上传到oss呢。谢谢。

使用multipartUpload上传超过100kb文件出错

使用multipartUpload上传超过100kb文件时, 使用了分片上传, 导致报错
2017-09-29_172630

能给出前端multipartUpload分片上传大文件的实例吗?希望得到任何相关的建议, 谢谢!

上传时会跳转链接为"...?partNumber=1&uploadId=..."

image
@rockuw 我昨天在一台mac上面上传成功了,成功时跳转的链接是"...?max-keys=100"。
今天换了一台mac测试,就失败了,跳转了好几个地址,如截图。然后最后一个失败了,400,打开提示的错误信息是:
<Error> <Code>AccessDenied</Code> <Message>Anonymous user has no right to access this object.</Message> <RequestId>59C10452ED0B5923D97CD756</RequestId> <HostId>code-deepano.oss-cn-shanghai.aliyuncs.com</HostId> </Error>

那几个跳转的奇怪的链接,前面几个都是200,最后一个400,错误信息是:
<Error> <Code>InvalidPart</Code> <Message>One or more of the specified parts could not be found or the specified entity tag might not have matched the part's entity tag.</Message> <RequestId>59C08EAA6816B70219427E18</RequestId> <HostId>code-deepano.oss-cn-shanghai.aliyuncs.com</HostId> <ETag>undefined</ETag> <PartNumber>1</PartNumber> <UploadId>E15687AE7D7D45DE92F9A1503F557B9A</UploadId> </Error>

无法使用

我在app.js中设置了如下参数:
var appServer = 'http://120.55.180.60/sts-token';
var bucket = 'zwgt-web';
var region = 'oss-cn-hangzhou';

但是发现使用urllib向sts发送请求的时候,就没有任何的返回。是否还要配置别的地方?

调用上传方法时报错 “ Uncaught (in promise): Error: _getFileSize requires Buffer/File/String.”

作者,你好,在开发客户端的时候调用方法 'multipartUpload'时报错,报错信息如下:

ERROR Error: Uncaught (in promise): Error: _getFileSize requires Buffer/File/String.
Error: _getFileSize requires Buffer/File/String.

请问,怎么会事儿?如何解决?thank you!

附,其他信息:
1、使用的是angular4框架,组件化开发;
2、语言:typescript;
3、此组件所有代码如下:

`import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

declare const OSS: any;

@component({
selector: 'app-file-upload-oss',
templateUrl: './file-upload-oss.component.html',
styleUrls: ['./file-upload-oss.component.scss']
})

export class FileUploadOssComponent implements OnInit {

// configuration parameter
@input() type?: String = 'rectangle';
@input() region: string;
@input() accessKeyId: string;
@input() accesskey: string;

@input()
set bucket(val: string) {
if (val !== '' && val.indexOf('/') !== val.length - 1) {
val = val + '/';
}
this._bucket = val;
};
get bucket(): string {
return this._bucket;
};

@output() uploadStatus = new EventEmitter();

_bucket: string;
filesList: any[] = [];

// Handle files
handleFiles(files: any[]) {
return new Promise((resolve) => {
for (const file of files) {
file['loading'] = false;
file['remove'] = false;
file['percent'] = 0;
};
resolve(files);
});
};

// click select files
clickSelectFiles($event: any) {
this.filesList.length = 0;

this.handleFiles($event.target.files).then((files: any[]) => {
  this.filesList.push(...files);
});

};

// dragover preventDefault
dragover($event: any) {
$event.preventDefault();
};

// drop select files
dropSelectFiles($event: any) {
$event.preventDefault();

this.handleFiles($event.dataTransfer.files).then((files: any[]) => {
  this.filesList.push(...files);
});

};

// remove files
removeFile(index: number) {
this.filesList[index]['removeAnimation'] = 'fadeOutRight';
setTimeout(() => {
this.filesList.splice(index, 1);
}, 300);
};

// upload files
uploadFile() {
const file = document.getElementById('btn')['files'][0];
const files = this.filesList;
const key = 'object';

const client = new OSS.Wrapper({
  region: this.region,
  accessKeyId: this.accessKeyId,
  accessKeySecret: this.accesskey,
  bucket: this.bucket
});

client.multipartUpload(key, file, {
  progress: this.progress
}).then(((res: any) => {
  alert(`${res}`);
  console.log('upload success');
  this.uploadStatus.emit(res);
}));

};

// upload progress
progress(p: any) {
console.log(进度${p});
};

constructor() { }

ngOnInit() {
}

}
`

分片上传出现Error: _getFileSize requires Buffer/File/String.

`

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.3.1.min.js"></script>
<script>
    $(function () {
        const stsServer = 'http://tap.test/ajax/file/apk-sts';
        const bucket = 'tap-apk-test';
        const region = 'oss-cn-beijing';
        const prefix = '';

        const urllib = OSS.urllib;

        const applyTokenDo = function (func) {
            const url = stsServer;
            return urllib.request(url, {method: 'GET'}, (err, response) => {
                if (err) {
                    return alert(err);
                }
                let result;
                try {
                    result = JSON.parse(response);
                } catch (e) {
                    let err = 'parse sts response info error: ' + e.message;
                    return alert(err);
                }
                console.log(result);
                const client = new OSS({
                    region: region,
                    accessKeyId: result.Credentials.AccessKeyId,
                    accessKeySecret: result.Credentials.AccessKeySecret,
                    stsToken: result.Credentials.SecurityToken,
                    bucket: bucket
                });
                return func(client);
            });
        };

        let currentCheckpoint;
        const progress = async function progress(p, checkpoint) {
            currentCheckpoint = checkpoint;
            const bar = document.getElementById('progress-bar');
            bar.style.width = `${Math.floor(p * 100)}%`;
            bar.innerHTML = `${Math.floor(p * 100)}%`;
        };

        let uploadFileClient;
        const uploadFile = function (client,file) {
            if (!uploadFileClient || Object.keys(uploadFileClient).length === 0) {
                uploadFileClient = client;
            }
            const key = prefix + '${filename}';

            const options = {
                progress,
                partSize: 100 * 1024,
            };

            return client.multipartUpload(key, file, options).then( (res) => {
                console.log('upload success: %j', res);
                currentCheckpoint = null;
                uploadFileClient = null;
            }).catch((err) => {
                if (uploadFileClient && uploadFileClient.isCancel()) {
                    console.log('stop-upload!');
                } else {
                    console.error(err);
                }
            });
        };

        $('#selectfiles').on('click', function () {
            $('#file').click();
        });

        $('#file').on('change',function () {
            let file = document.getElementById('file').files[0];
            console.log(file);
            $('#file').val('');
            applyTokenDo(uploadFile,file);
        });
    });
</script>

`
企业微信截图_6c88935e-3dc8-4562-9f1a-3f4756436d39

请问下RN用这个有问题吗?一直报错。。

error: bundling failed: Error: Unable to resolve module ./browser/client from /Users/aiya/Documents/StudioProjects/FocalTvApp/node_modules/ali-oss/dist/aliyun-oss-sdk.js: The module ./browser/client could not be found from /Users/aiya/Documents/StudioProjects/FocalTvApp/node_modules/ali-oss/dist/aliyun-oss-sdk.js. Indeed, none of these files exist:
只要调用了var OSS = require('ali-oss'); 就会报上面那个错,不明白什么原因 node 版本V8.9.4

上传较大文件时失败

使用Demo中的multipartUpload上传较大文件(69M),分片上传不成功。


uploadId=BB7A6B1CBC7C4CADB63FC8AAAC527A0E
从console中的错误日志看貌似是跨域问题,但是分片上传请求记录中可以看出来,部分请求是成功的。
上传小文件没有问题。

我就问个问题

这种方式怎么设置传回调??????求知道的大神指点一下~

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.