vue上传OSS前端实现直传阿里云

 看了好多例子终于走通了，下面例子为前端暴漏了信息的简单实现过程，实际上需后端配合返回需要的信息

参考了这些文章

https://www.cnblogs.com/ldlx-mars/p/7985758.html  OSS存储
https://www.cnblogs.com/yw-elm/p/VUEli-yongOSS-BrowserJSSDK-shi-xian-a-liOSS-qian-d.html      OSS存储

一定要在阿里上配置好，不然下面的代码写对了也出错！之前没做过不知道哪里错了，一直以为前端的问题误导了2天，找各种文档，文章，最后是因为阿里上面没配置好导致

阿里OSS配置完（配置参考上面的文章），之后安装

npm install ali-oss

剩余代码 

<template>
    <div>
        <div class="wrap">
            <div>视频:</div>
            <div><input type="file" id="uploadImage" @change="toUpload" placeholder=""/></div>
        </div>        
    </div>
</template>
<script>
import OSS from 'ali-oss';
    export default {
        name: "upload",
        data() {
            return {
               loading: false 
            };
        },
        methods: {
            toUpload() {
                let _this =this;
                _this.loading=true
                var client = new OSS({
                    region: 'oss-cn----',
                    accessKeyId: '-------',
                    accessKeySecret: '-----',
                    bucket: '----'
                });
                //获取文件信息
                const files = document.getElementById("uploadImage")
                if (files.files) {
                    const fileLen = document.getElementById("uploadImage").files
                    const file = document.getElementById("uploadImage").files[0]
                    let consat = file.name;
                    let name = fileLen[0].name
                    for (let i = 0; i < fileLen.length; i++) {
                        const file = fileLen[i]
                        client.multipartUpload(name, file).then(function(res){
                            _this.loading=false
                            var str=res.res.requestUrls[0]
                            console.log(str.split("?")[0])
                            _this.$emit('childByValue', str.split("?")[0])
                        }).catch((err) => {
                            console.log(err)
                        })
                    }
                }
            },
        },
        
    };
</script>
<style  scoped>
.wrap{
    width: 350px;
    height: 40px;
    display: flex;
    justify-content: space-between;
}
</style>

 

来源：CSDN

作者：qq_42221334

链接：https://blog.csdn.net/qq_42221334/article/details/100524158