七牛云上传图片-Vue+ElementUI使用qiniu-js

<script>   

export default {

    name: 'sendMessages',

    components: {},

    props:{

        conData: {},

        QiniuData: {}

    },

    data () {

        return {

            commentuid: '',

            loading: false,

            domain: "", // 七牛云的上传地址（华南区）

            qiniuaddr: "http://qnidimage.mmantou.cn", // 七牛云的图片外链地址

            uploadPicUrl: "", //提交到后台图片地址

            fileList: [],

            fileList2: [],

            qiniuUploader: null, // 七牛上传对象

            disabled: false,

            delates: false,

            QiniuDatas: {

                key: ""

            }

        }

    },

    mounted (){

        this.qiniuUploader = require('qiniu-js');

        this.initData();      

    },

    methods:{

        initData(){},  

        selectFileEvent(e) {

            this.$refs.selectFile.click();

        },

        handleRemove() {

            this.fileList = []

            this.fileList2 = []

        },

        changeSuccess(file){    

            this.fileList=[]

            this.fileList2=[]     

            if(this.QiniuData.token!=''){

                this.loading = true 

                var fileType = new Array("image/png", "image/jpeg", "image/jpg","image/gif");

                var file=file.target.files[0]

                console.log(file)

                if(!(fileType.indexOf(file.type) > -1)){

                    this.$message.error(this.$t('uploadPicFormats'));

                    return false;

                } 

               const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isLt2M) {                

                    this.$message.error(this.$t('editProfileDesc'));

                    this.loading = false 

                    return false;

                }            

                var putExtra = {

                    fname: "",

                    params: {},

                    mimeType: ["image/png", "image/jpeg", "image/jpg","image/gif"]

                };

                var config = {

                    useCdnDomain: true,

                    UseHTTPS:true,

                    region: null

                };

                var that= this;

                var observer = {

                    next(res){},

                    error(err){console.log(err)},

                    complete(res){ 

                        that.loading=false

                        that.QiniuDatas.key = res.key

                        that.uploadPicUrl = `${that.qiniuaddr}/${that.QiniuDatas.key}`                     

                        that.upscuss()

                    }

                };

                this.loading = true

                var observable = this.qiniuUploader.upload(file,null,this.QiniuData.token,putExtra,config)

                var subscription = observable.subscribe(observer) // 上传开始

            }else{

                console.log('---')

            }

            

        },

        upscuss(){

            this.fileList.push(this.QiniuDatas.key)

            this.fileList2.push(this.uploadPicUrl)

        },

    },

 

}

</script>

</style>