vue上傳阿里雲圖片組件

首先需要弄一個阿里雲存儲。然后配置一下。前端就可以直接上傳圖片並回顯。
可在父級組件定義上傳圖片類型以及大小。默認為500kb。樣式可以自適應調整。

<template>
    <div class="upLoat">
        <a href="javascript:;" class="file">上傳圖片
            <input type="file" :accept="typeArr" @change="upload($event)">
        </a>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui';
    export default {
        props     : ['data', 'typeArr', 'size'],
        data(){
            return {
                client  : '',
                fileSize: 500000
            }
        },
        created(){
            if (this.size) {
                this.fileSize = this.size;
            }
            this.client = new OSS.Wrapper({
                region         : process.env.region,
                secure         : true,
                accessKeyId    : process.env.accessKeyId,
                /*這兩者到阿里雲控制台獲得*/
                accessKeySecret: process.env.accessKeySecret,
                bucket         : process.env.bucket /*裝圖片的桶名*/
            });
        }, methods: {
            /**上傳圖片**/
            upload(event){
                var self = this;
                var file = event.target.files[0];

                var type    = file.name.split('.')[1];
                var storeAs = this.getUuid() + '.' + type;
                var boolean = true;
                if (file.size > this.fileSize) {
                    Toast('親,圖片不能超過!' + this.fileSize / 1000 + 'kb');
                    return false;
                }
                if (this.typeArr && this.typeArr.indexOf(type) > 0) {
                    boolean = false;
                }
                if (boolean) {
                    Toast('上傳圖片格式不支持!請選擇' + this.typeArr);
                    return false;
                }
                this.client.multipartUpload(storeAs, file).then(function (result) {

                    self.data.url = result.res.requestUrls[0].split('?')[0];

                }).catch(function (err) {

                    console.log(err);
                });

            },
            getUuid() {
                var len   = 32; //32長度
                var radix = 16; //16進制
                var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
                var uuid  = [],
                    i;
                radix     = radix || chars.length;
                if (len) {
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                } else {
                    var r;
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r       = 0 | Math.random() * 16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
                }
                return uuid.join('');

            }
        }
    }
</script>
<style scoped lang="less">

    .file {
        position: relative;
        left: .26rem;
        top: .2rem;
        display: inline-block;
        background: #32d582;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: white;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }

    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }

</style>

父級組件：

       <up-Load class="files" :data="item"
                                 typeArr="image/png,image/jpg,image/gif,image/jpeg" size="50000"></up-Load>

全局引入  <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>