uni-app交流分享 使用plus.uploader上传图片到阿里云OSS

uni-app交流分享 使用plus.uploader上传图片到阿里云OSS

1. 需要准备的

继续阅读前，请确保你已经开通了阿里云OSS服务，并拿到了下面三样东西

• 自己申请的阿里云OSS的地址，例如 http://XXXXXXXXXX-shanghai.aliyuncs.com/
• 阿里云OSS给你的AccessKeyId 例如 “Lasdasnioiduai123jdsa”
• 阿里云OSS给你的AccessKeySecret 例如 “sggrkconoian3r3oijo545nfoosjd”（这里是乱填的，实际要用自己的）
• 下面是官方给的测试用的，不要上传奇怪的图片进行测试哦

  accessid= '6MKOqxGiGU4AUk44';
  accesskey= 'ufu7nS8kS59awNihtjSonMETLI0KLy';
  host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';
  

上传的demo代码按照惯例附在文章末尾，已经在明显的地方做了注释，运行demo之前需要将上面三个东西一一替换

2. oss功能介绍

使用阿里云OSS之前，肯定要学习下怎么用，鉴于我们开发的是webapp，基本是在html页面上操作，所以要使用到他的web直传的功能，即通过Html表单提交直传OSS。

3. 开搞

在这个基础篇：客户端用JS直接签名，然后上传到OSS例子中，官方给出了一个web直传的demo，对应的下载地址

demo下下来，目录结构如上图，二话不说编辑器打开“index.html”，会发现重点在下面这6个js（假设大家已经阅读了官方文章和demo的代码）

进一步阅读代码，crypto.js、hmac.js、sha1.js、base64.js好像都跟加密有点关系，嗯先放一边吧。同时官方文章中提到“采用plupload 直接提交表单数据(即PostObject)到OSS”

这说明plupload.full.min.js应该就是个上传插件了，嗯，继续先放一边，我们看最后剩下的upload.js，哎哟卧槽，果然业务逻辑代码都在这里面了，写的还是比较容易理解，多读几遍，上来就是三个变量，就是本文开篇处提到的三个必备的。

accessid= '6MKOqxGiGU4AUk44';  
accesskey= 'ufu7nS8kS59awNihtjSonMETLI0KLy';  
host = 'http://post-test.oss-cn-hangzhou.aliyuncs.com';

4. 配置plus.uploader

有了上面的铺垫，plus.uploader就很好配置了

首先是引入几个加密计算用的js，不要偷懒，直接引用

<script type="text/javascript" src="../js/crypto.js"></script>
<script type="text/javascript" src="../js/hmac.js"></script>
<script type="text/javascript" src="../js/base64.js"></script>
<script type="text/javascript" src="../js/sha1.js"></script>

按照demo进行各种转换计算，ctrl+c/ctrl+v即可

var policyText = {
    "expiration": "2020-01-01T12:00:00.000Z",
    "conditions": [
        ["content-length-range", 0, 1048576000]
    ]
};
var policyBase64 = Base64.encode(JSON.stringify(policyText));
var message = policyBase64;
var bytes = Crypto.HMAC(Crypto.SHA1, message, AccessKeySecret, {
    asBytes: true
});
var signature = Crypto.util.bytesToBase64(bytes);

初始化plus.uploader

function upload() {
    if(files.length <= 0) {
        plus.nativeUI.alert("没有添加上传文件！");
        return;
    }
    outSet("开始上传：")
    var wt = plus.nativeUI.showWaiting();
    var task = plus.uploader.createUpload(server, {
        method: "POST"
    },
    function(t, status) { //上传完成
        console.log("t" + JSON.stringify(t));
        if(status == 200) {
            outLine("上传成功：" + t.responseText);
            //至此上传成功，上传后的图片完整地址为server+testName
            var uploaderFileObj = {
                "server":server,
                "path":testName
            };
            plus.storage.setItem("uploader", JSON.stringify(uploaderFileObj));
            var w = plus.webview.create("uploader_ret.html", "uploader_ret.html", {
                scrollIndicator: 'none',
                scalable: false
            });
            w.addEventListener("loaded", function() {
                wt.close();
                w.show("slide-in-right", 300);
            }, false);
        } else {
            outLine("上传失败：" + status);
            wt.close();
        }
    }
);
var suffix1 = get_suffix(fname);  //文件后缀  例如   .jpg
var keyname = dir + new Date().getTime() + suffix1;

testName = keyname;
console.log("keyname" + keyname);
//按照之前说明的参数类型，按顺序添加参数
task.addData("key", keyname);
task.addData("policy", policyBase64);
task.addData("OSSAccessKeyId", OSSAccessKeyId);
task.addData("success_action_status", "200");
task.addData("signature", signature);
console.log("files[0]" + JSON.stringify(files[0]));
var f = files[0];
task.addFile(f.path, {
    key: "file",
    name: "file",
    mime: "image/jpeg"
});
task.start();
}