UniCloud 提供的阿里云版服务空间是可以免费10GB云存储的,存储+流量都是免费的,这里教大家怎么不使用 uniapp 直接上传文件,可以前端 ajax 直接上传或者后端服务器上传。在这之前请先申请unicloud 账号并且开通 阿里云版的服务空间。

上传流程
流程图

1. 获取上传的请求参数

先通过接口获取需要的请求参数,请查看 https://www.alapi.cn/api/view/100 获取需要的上传配置
先通过 ALAPI 获取 unicloud 云存储上传的请求参数,正常返回如下:

{
    "code": 200,
    "msg": "success",
    "data": {
        "Cache-Control": "max-age=2592000",
        "Content-Disposition": "attachment",
        "OSSAccessKeyId": "LTAIupaslTlUlspm",
        "Signature": "v9evdqBPxPNx5SHWzfGcIJeB2mM=",
        "host": "bsppub.oss-cn-shanghai.aliyuncs.com",
        "id": "18c6565f-1e34-4aec-9e82-a3d14743feb9",
        "key": "VKCEYUGU-xxxxx-47ff-4374-a4f5-1ed32921a3ff/0f2da8f5-9a60-4e8c-bed6-e94edafed57d.png",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMi0wMS0xM1QxMTo1NzoyMi42NjFaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwXSxbImVxIiwiJGtleSIsIlZLQ0VZVUdVLTllZjY5ZjVlLTQ3ZmYtNDM3NC1hNGY1LTFlZDMyOTIxYTNmZi8wZjJkYThmNS05YTYwLTRlOGMtYmVkNi1lOTRlZGFmZWQ1N2QucG5nIl1dfQ==",
        "success_action_status": 200,
        "url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9ef69f5e-47ff-4374-a4f5-1ed32921a3ff/0f2da8f5-9a60-4e8c-bed6-e94edafed57d.png"
    },
    "time": 1642074442,
    "log_id": 340218631351480321
}

开始上传文件

获取到参数后就可以去上传文件了,每次上传文件都需要重新获取请求参数哦。这里教大家怎么用 AJAX上传和php上传
上传文件的必要参数

 "Cache-Control": "max-age=2592000",
        "Content-Disposition": "attachment",
        "OSSAccessKeyId": "LTAIupaslTlUlspm",
        "Signature": "v9evdqBPxPNx5SHWzfGcIJeB2mM=",
        "host": "bsppub.oss-cn-shanghai.aliyuncs.com",
        "id": "18c6565f-1e34-4aec-9e82-a3d14743feb9",
        "key": "VKCEYUGU-xxxxx-47ff-4374-a4f5-1ed32921a3ff/0f2da8f5-9a60-4e8c-bed6-e94edafed57d.png",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMi0wMS0xM1QxMTo1NzoyMi42NjFaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwXSxbImVxIiwiJGtleSIsIlZLQ0VZVUdVLTllZjY5ZjVlLTQ3ZmYtNDM3NC1hNGY1LTFlZDMyOTIxYTNmZi8wZjJkYThmNS05YTYwLTRlOGMtYmVkNi1lOTRlZGFmZWQ1N2QucG5nIl1dfQ==",
        "success_action_status": 200,
        "url": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-9ef69f5e-47ff-4374-a4f5-1ed32921a3ff/0f2da8f5-9a60-4e8c-bed6-e94edafed57d.png",

在这些参数的最后面再加一个 file 参数就可以了,file就是你要上传的文件,还需要加一个请求头 {"X-OSS-server-side-encrpytion":"AES256"}

AJAX 上传

ajax 就是前端上传文件

$.ajax({
        url: "https://v2.alapi.cn/api/unicloud/upload",
        method: "POST",
        data: {
            token: "你的ALAPItoken",
            space_id: "你的unicloud spaceId",
            client_secret: "你的 unicloud secret 秘钥",
            filename: "要上传的文件名"
        },
        success: function (res) {
            if (res.code === 200) {
                //获取上传配置成功了。
                const {data} = res
                //
                const form = new FormData();
                //把上传的参数转为 fromdata
                for (const it in data) {
                    form.append(it,data[it])
                }
                //添加你要上传的文件, fileinput 是表单文件
                form.append("file",fileinput[0]);
                //form 参数配置好了后开始上传文件
                //设置上传的url,返回参数里面的 host 就是上传url地址
                //返回的参数里的 url 就是你上传完文件的url地址
                const uploadUrl = "https://"+data.host
                const url = data.url // 文件的url地址
                const id = data.id //文件的id,上传完成需要用到
                $.ajax({
                    url:uploadUrl,
                    method:"POST",
                    data:form,
                    headers:{"X-OSS-server-side-encrpytion":"AES256"},//要加这个请求头
                    success(res){
                        //上传完文件是没有返回实际内容的,但是返回的状态码是200
                        console.log('上传完成,url:' + url)
                        //上传完成后还需要设置上传完成,才会添加到你的服务空间里(不设置也是可以正常下载文件的,就是不会在你的云存储里面显示出来,好像也不会占用空间?)
                        $.ajax({
                            url:"https://v2.alapi.cn/api/unicloud/uploadok",
                            method:"POST",
                            data:{
                                token: "你的ALAPItoken",
                                space_id: "你的unicloud spaceId",
                                client_secret: "你的 unicloud secret 秘钥",
                                id: id,//文件ID
                            }
                        })
                    },
                    error(err){
                        console.log('上传出错了,请查看返回的 xml 信息。')
                    }
                })
            }
        }
    })

使用 PHP 上传

<?php

#1.获取上传配置

$token = "alapi的TOKEN";
$filename = "test.txt";
$space_id = 'unicloud spaceid';
$client_secret = "unicloud client_secret";

$uploadConfig = json_decode(file_get_contents(sprintf("https://v2.alapi.cn/api/unicloud/upload?token=%s&filename=%s&space_id=%s&client_secret=%s", $token, $filename, $space_id, $client_secret)), true);

if ($uploadConfig['code'] == 200) {
    $config = $uploadConfig['data'];
    $url = $config['url'];//文件URL 地址
    $id = $config['id'];//文件ID,设置上传完成需要用到
    $uploadUrl = 'https://' . $config['host'];//上传请求地址
    //开始上传文件
    $curl = curl_init();
    $config['file'] = new CURLFile($filename);//添加上传的文件

    curl_setopt_array($curl, [
        CURLOPT_URL => $config['host'],
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_ENCODING => '',
        CURLOPT_MAXREDIRS => 10,
        CURLOPT_TIMEOUT => 0,
        CURLOPT_FOLLOWLOCATION => true,
        CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
        CURLOPT_CUSTOMREQUEST => 'POST',
        CURLOPT_POSTFIELDS => $config,
        CURLOPT_HEADEROPT => ['X-OSS-server-side-encrpytion:AES256'],//添加必要的请求头
    ]);
    $response = curl_exec($curl);
    $httpCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    curl_close($curl);
    if($httpCode === 200){
        //上传成功了
        echo $url;//文件URL 地址

        //上传完成后还需要设置上传完成,才会添加到你的服务空间里(不设置也是可以正常下载文件的,就是不会在你的云存储里面显示出来,好像也不会占用空间?)
        file_get_contents(sprintf("https://v2.alapi.cn/api/unicloud/uploadok?token=%s&id=%s&space_id=%s&client_secret=%s", $token, $id, $space_id, $client_secret));
    }
}else{
//获取上传信息出错了,请检查秘钥信息
    echo '//获取上传信息出错了,请检查秘钥信息';
}

Last modification:March 1st, 2022 at 03:09 pm
如果觉得我的文章对你有用,请随意赞赏