vue上传阿里云图片组件

Posted 2020-10-13 奔跑the蚂蚁

首先需要弄一个阿里云存储。然后配置一下。前端就可以直接上传图片并回显。
可在父级组件定义上传图片类型以及大小。默认为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>