Javascript js结合axios上传文件阿里云oss 亲测有效

最新推荐文章于 2024-08-21 04:35:59 发布

kingrome2009

最新推荐文章于 2024-08-21 04:35:59 发布

阅读量2k

点赞数

分类专栏： Javascript 文章标签： OSS

本文链接：https://blog.csdn.net/kingrome2017/article/details/82830919

版权

Javascript 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

本案例区别与网上其他案例，采用vue-axios，先获取临时授权，授权成功后上传图片到OSS，仅供参考，各家公司的后台配置都不相同

OSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="bookMarker">
        <input type="file" name="flie" accept="image/png,image/gif,image/jpeg" id="upload" @change="previewImage">
        <hr/>
        <div id="preview_box"></div>
    </div>
    <script type="text/javascript" src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.10.0.min.js"></script>
    <script type="text/javascript" src="./crypto1/crypto/crypto.js"></script>
    <script type="text/javascript" src="./crypto1/hmac/hmac.js"></script>
    <script type="text/javascript" src="./crypto1/sha1/sha1.js"></script>
    <script type="text/javascript" src="./base64.js"></script>
    <script type="text/javascript" src="./vue/vue.min.js"></script>
    <script type="text/javascript" src="./vue/axios.min.js"></script>
    <script type="text/javascript" src="./app.js"></script>
    <script>
        var policyText = {
            "expiration": "2020-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
            "conditions": [
                ["content-length-range", 0, 10485760000] // 设置上传文件的大小限制
            ]
        };
        var policyBase64 = Base64.encode(JSON.stringify(policyText));
        var vm = new Vue({
            el: '#bookMarker',
            data: {
            },
            methods:{
                previewImage(event){
                    let file = event.target.files[0];
                    let formData = new FormData(); // 用formdata上传文件
                    let suffixName = file.type.split('/');
                    var reader = new FileReader();

                    reader.readAsDataURL(file); // 读取文件
                    // 渲染文件
                    reader.onload = (ev)=>{
                        var buffer = new OSS.Buffer(ev.target.result);
                        console.log(buffer)
                        formData.append('extention', suffixName[1]); // 填入文件
                        formData.append('token','');
                        formData.append('storeType','PI')
                        this.$ajax({
                            method: 'POST',
                            url: '先通过临时授权',
                            data: formData,
                        }).then((res)=>{
                            var result = res.data.payload;
                            console.log(result)
                            var bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, result.accesskeysecret, { asBytes: true });
                            var signature = Crypto.util.bytesToBase64(bytes);                          
                            var storeAs = result.key;
                            
                            imgFileId = result.fileId;
                            var client = new OSS.Wrapper({
                                'region': "oss-cn-beijing",
                                'accessKeyId': result.accesskeyid,
                                'accessKeySecret': result.accesskeysecret,
                                'stsToken': result.securitytoken,
                                'bucket': result.bucketName,
                                'endpoint': result.endpoint,
                                'policy': policyBase64,
                                'success_action_status': '200', //让服务端返回200,不然，默认会返回204
                                'signature': signature
                            });
                            client.put(storeAs, buffer).then(function (result) {
                                console.log(result,'63');
                            })
                            if(imgFileId){
                                // this.getImgUrl() 根据imgFileId去获取图片路径
                            }
                        },(err)=>{
                            console.log(err);
                        })                        
                    }
                },
                // getImgUrl(){
                //     this.$ajax({
                //         method: 'GET',
                //         url: '根据后台接口获取图片路径',
                //         data:{
                //             FileID: imgFileId,
                //             Type: 1,
                //             token: ''
                //         },
                //     }).then((res)=>{
                //         console.log(res,'90')
                //     })
                // }
            }
        })
    </script>
</body>
</html>