前端直传阿里云OSS上

作者: 安晓生 | 来源:发表于2021-01-25 10:22 被阅读0次

前端直传阿里云OSS上
flutter 上传照片，已及上传阿里云；
文件上传的实现方式
VUE直传阿里云OSS
无标题文章
oss视频转码----比阿里云文档更详细
Web直传阿里云OSS服务端临签名总结 2021-01-28
微信小程序直传文件到oss
【vue】element-ui + OSS 上传图片
web端阿里云oss直传

前端值传到阿里云OSS服务器上。

[TOC]

------------

### 获取aliyun oss直传签名

    
**简要描述：** 

- 获取aliyun oss直传签名

**请求URL：** 
- ` /options/sign-policy `
  
**请求方式：**
- GET 

**参数：** 
无 

 **返回示例**

{
    "status": "000000",
    "message": "请求成功",
    "result": {
        "accessid": "LTAIGD4abj3sXouZ",
        "host": "http://xxxxx-hangzhou.aliyuncs.com",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMS0wMS0xMVQxMToxNDozNloiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsImRldlwveHN0dmNybVwvIl1dfQ==",
        "signature": "OSQTfA0Vws5pDmq1lD+2nVpcLuk=",
        "expire": 1610334876,
        "dir": "dev/xstvcrm/",
        "file_path": "dev/xstvcrm/tmp_images/Xovno/"
    }
}

返回参数说明

参数名	类型	说明
accessid	string	OSSAccessKeyId
host	string	aliyun oss直传接口名
policy	string	policy
signature	string	Signature
expire	int	签名过期时间
dir	string	允许上传到的目录
file_path	string	上传文件的目录

直传demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file[]"/>
    <br/>
    <button id="upload" type="button" onclick="up()">upload</button>
</form>

</body>
<script>
    var items = {
        "accessid": "LTAIGD4abj3sXouZ",
        "host": "http://xxxxx-hangzhou.aliyuncs.com",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMS0wMS0wOVQxNzo1Mjo0OVoiLCJjb25kaXRpb25zIjpbWyJjb250ZW50LWxlbmd0aC1yYW5nZSIsMCwxMDQ4NTc2MDAwXSxbInN0YXJ0cy13aXRoIiwiJGtleSIsImRldlwveHN0dmNybVwvIl1dfQ==",
        "signature": "C9iauWOUwBLTXr+GgEeMevhhOag=",
        "expire": 1610185969,
        "dir": "dev/xstvcrm/",
        "file_path": "dev/xstvcrm/tmp_images/Xovno/"
    };
    var sign = items;
    function up() {
        var formData = new FormData();
        var data = {};
        url = sign.host;
        formData.append('OSSAccessKeyId',sign.accessid);
        formData.append('policy',sign.policy);
        formData.append('Signature',sign.signature);
        formData.append('x-oss-forbid-overwrite',true);
        formData.append('success_action_status',200);
        formData.append('key',sign.file_path+_random(5)+".png");
        formData.append('file',$('#file')[0].files[0]);

        $.ajax({
            url: url,
            type: 'POST',
            data:formData,
            cache: false,
            processData: false,
            contentType: false,
        }).done(function (res) {
             console.log('success')
            console.info(res)
        }).fail(function (res) {
            console.log('error')
            console.log(res)
        });
    }

    function _random(length) {
        const data =
            ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F",
                "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y",
                "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r",
                "s", "t", "u", "v", "w", "x", "y", "z"];
        let nums = "";
        for (let i = 0; i < length; i++) {
            const r = parseInt(Math.random() * 61, 10);
            nums += data[r];
        }
        return nums;
    }
</script>
</html>