# 对象存储

/**
 * @Author: baijd-a
 * @Date: 2020-10-26 15:58:29
 * @LastEditTime: 2020-10-26 15:58:29
 * @LastEditors: baijd-a
 * @Description: 采用云中立平台的对象存储适配，下面代码演示了前端如何采用签名直传的方式上传文件到 OSS、S3
 * 针对请求方式可采用 ajax axios
 * 根据url从服务端获取签名直传的签名相关信息
 * @param url
 * @returns 签名相关信息
function getSignature(url) {
    let result = null;
    $.ajax({
        url: url,
        type: "get",
        async: false,
        success: function (data) {
            result = JSON.parse(data);
    });
    return result;
 * 通过 Ajax 上传文件到云服务
 * 注意：
 *      请求时 FormData 参数中的 Content-Type, Content-Disposition, keyPrefix 需要和后端返回的策略中保持一致
 * @param file 文件
 * @param accessId AK
 * @param policy 上传策略 base64值
 * @param signature 签名
 * @param host 上传的host
 * @param contentType 上传的Content-Type ===> 从服务端获取到的 Policy 中的值
 * @param contentDisposition 展示形式：内联(inline)，附件下载(attachment; filename="xxx") ===> 从服务端获取到的 Policy 中的值
 * @param objectKeyPrefix 上传的key前缀
 * @param isS3 是否是S3服务[华为云、腾讯云、MINIO、CEPH、AWS]
function postObjectByAjax(file, accessId, policy, signature, host, contentType, contentDisposition, objectKeyPrefix, isS3) {
    let form = new FormData();
    if (isS3) {
        form.append('AWSAccessKeyId', accessId); // S3 的 accessID; 若是上传到 S3 采用这个参数
    } else {
        form.append('OSSAccessKeyId', accessId);  // OSS 的 accessID; 若是上传到 OSS 采用这个参数
    form.append('policy', policy);
    form.append('signature', signature);
    if (contentType !== null && contentType !== '') {
        form.append("Content-Type", contentType);
    if (contentDisposition !== null && contentDisposition !== '') {
        form.append("Content-Disposition", contentDisposition)
    if (objectKeyPrefix == null) {
        objectKeyPrefix = '';
    } else if (objectKeyPrefix !== '' && !objectKeyPrefix.endsWith("/")) {
        objectKeyPrefix += "/";
    form.append('key', objectKeyPrefix + file.name);  // key: 文件上传的完整路径 若有目录含有目录
    form.append('success_action_status', 200); // 文件上传成功后返回的状态
    form.append('file', file);
    return _ajaxPostObject(host, form);
function _ajaxPostObject(url, formData) {
    var result = false;
    $.ajax({
        type: "POST",
        url: url,
        data: formData,
        processData: false,
        cache: false, // 设置为false将不会从浏览器缓存中加载请求信息
        async: false, // 发送同步请求
        contentType: false, // 避免服务器不能正常解析文件
        // dataType: 'JSONP', // jsonp只能提供get请求; 不涉及跨域, 写json即可
        success: function (data) {
            result = true;
    });
    return result;
 * 通过 Axios 上传文件到云服务
 * 注意：
 *      请求时 FormData 参数中的 Content-Type, Content-Disposition, keyPrefix需要和后端返回的策略中保持一致
 * @param file 文件
 * @param accessId AK
 * @param policy 上传策略 base64值
 * @param signature 签名
 * @param host 上传的host
 * @param contentType 上传的Content-Type  ===> 从服务端获取到的 Policy 中的值
 * @param contentDisposition 展示形式：内联(inline)，附件下载(attachment; filename="xxx") ===> 从服务端获取到的 Policy 中的值
 * @param objectKeyPrefix 上传的key前缀
 * @param isS3 是否是S3服务[华为云、腾讯云、MINIO、CEPH、AWS]
function postObjectByAxios(file, accessId, policy, signature, host, contentType, contentDisposition, objectKeyPrefix, isS3) {
    let form = new FormData();
    if (isS3) {
        form.append('AWSAccessKeyId', accessId); // S3 的 accessID; 若是上传到 S3 采用这个参数
    } else {
        form.append('OSSAccessKeyId', accessId);  // OSS 的 accessID; 若是上传到OSS 采用这个参数
    form.append('policy', policy);
    form.append('signature', signature);
    form.append('signature', signature);
    if (contentType !== null && contentType !== '') {
        form.append("Content-Type", contentType);
    if (contentDisposition !== null && contentDisposition !== '') {
        form.append("Content-Disposition", contentDisposition)
    if (objectKeyPrefix == null) {
        objectKeyPrefix = '';
    } else if (objectKeyPrefix !== '' && !objectKeyPrefix.endsWith("/")) {
        objectKeyPrefix += "/";
    form.append('key', objectKeyPrefix + file.name);  // key: 文件上传的完整路径 若有目录含有目录
    form.append('success_action_status', 200); // 文件上传成功后返回的状态,默认204
    form.append('file', file);  // 文件流
    let config = {
        header: {
            'Content-Type': 'multipart/form-data;',
    axios.post(host, form, config)
        .then(res => {
            console.log('上传成功');
        .catch(error => {
            console.log('上传失败');
            console.log(error)
        });
 * 判断对象是否为数组
 * @param o 要判断的对象
 * @returns {boolean} 判断结果
function isArray(o) {
    return Object.prototype.toString.call(o) === '[object Array]';
 * 将后端返回的结构中的策略 Policy json 进行解析
 * @param postPolicyJson Policy json
 * @returns {{contentDisposition: string, contentType: string, keyPrefix: string}}
function resolvePostPolicy(postPolicyJson) {
    // 解析从服务端获取到的签名和策略相关的信息
    let contentDisposition = '';
    let contentType = '';
    let keyPrefix = '';
    const postPolicy = JSON.parse(postPolicyJson);
    const conditions = postPolicy.conditions;
    for (let i = 0; i < conditions.length; i++) {
        const condition = conditions[i];
        if (isArray(condition) && condition[0] === 'starts-with') {
            keyPrefix = condition[2];
        } else {
            if (condition['Content-Type'] !== undefined) {
                contentType = condition['Content-Type'];
            if (condition['Content-Disposition'] !== undefined) {
                contentDisposition = condition['Content-Disposition'];
    return {
        contentType: contentType,
        contentDisposition: contentDisposition,
        keyPrefix: keyPrefix