# bootstrap-fileinput-aliyunoss

**Repository Path**: shoukaiseki/bootstrap-fileinput-aliyunoss

## Basic Information

- **Project Name**: bootstrap-fileinput-aliyunoss
- **Description**: bootstrap-fileinput 通过STSToken 上传到阿里云OSS
- **Primary Language**: JavaScript
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2020-11-19
- **Last Updated**: 2023-06-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bootstrap-fileinput-aliyunoss

bootstrap 的 fileinput插件,上传没有开放出单独的上传方法,我这里是改了fileinput,增加了 uploadCustom 的调用,

在optionss中增加该方法就能自定义上传文件的方法

而阿里云的 ossclient 上传方式比较特别,为了fileinput能够正常显示上传进度,我在 sks-ui.js中自己写了一个模拟xhr的对象,

就是为了让fileinput知道当前上传进度.

该测试项目包含后台sts接口的获取.


###  如果您是懂得java的springboot开发,那么直接运行之后访问  http://localhost:8081/examples/testInputFile.html 就能看到效果
不过运行之前需要修改 application.yml 文件中的 accessKeyId,secretAccessKey,roleArn等配置


###  如果您是纯前端开发人员
那么 src/main/resources/static 整个目录copy到你的测试项目中,其中的 examples/testInputFile.html 是下面图片展示访问的地址

获取的token格式如下 
```json
{
    "data": {
        "accessKeyId": "STS.NU448LtV8D6Gmg2u3YtLNgAjr",
        "accessKeySecret": "2vnq9ahqrMqbebhX7RUSioScAnB42GuStvw4fyB9sC8a",
        "stsToken": "CAIS7AF1q6Ft5B2yfSjIr5aBf4L4mYkZ8/Ssb0GDkTMMeMNiiITBkDz2IHlLfXFpAe4ftfwwlGlS6/YZlqpoSIQd6pxY/0M2vPpt6gqET9frma7ctM4p6vCMHWyUFGSIvqv7aPn4S9XwY+qkb0u++AZ43br9c0fJPTXnS+rr76RqddMKRAK1QCNbDdNNXGtYpdQdKGHaOITGUHeooBKJXBAz4VAh0j0gt/7vmJbD0HeE0g2mkN1yjp/qP52pY/NrOJpCSNqv1IR0DPGYj3cIskAUrfwu0/wdo2qX5cv/GVBU5A6dL+fP7s3Kp4S37gnMcBqAAWbRHnAfN9FPbRtJnDcfz3ZGdIkCcnjW6/iiRJ9qv/F249O/NE+VSN4o2dyaxOhNbnNI4+B4OgEA8ehJQs5YLCW/cg85+aIk/YfW9j5Jo/oocB31Pq1w+7ak4ayMy6kkBNG7PhTClSjwttdS3zEV6KxgD1N0LioPBd+N04arqO/l",
        "endpoint": "oss-cn-hangzhou.aliyuncs.com",
        "bucket": "test-001a",
        "fileName": "test/doc/7cdc7c38d5f843ee83f508fa8d565849.jpg",
        "ossName": null,
        "wbDocmentId": 6,
        "url": "https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/doc/7cdc7c38d5f843ee83f508fa8d565849.jpg"
    },
    "code": "0"
}
```

## 效果展示

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/001.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/002.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/003.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/004.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/005.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/006.jpg "shoukaiseki")

![sks](https://gitee.com/shoukaiseki/bootstrap-fileinput-aliyunoss/raw/master/img/007.jpg "shoukaiseki")