<template>
    <div @click="selectFile">
        <input type="file" ref="fileInput" v-show="false" @change="onFileChange" />
        <div>{{uploading?infoText:'上传文件'}}</div>
    </div>
</template>

<script>
export default {
    name: "oss-uploader",
    data() {
        return {
            uploading: false,
            infoText: "上传中...",
            cosConfig: []
        }
    },
    mounted() {
        this.$http({
            url: this.$http.adornUrl('/sys/oss/config'),
            method: 'get',
            params: this.$http.adornParams()
        }).then(({ data }) => {
            if (data && data.code === 200 && data.config.type) {
                this.cosConfig = data.config
            } else {
                this.$message.error('请先配置云存储相关信息！')
            }

        })
    },
    methods: {
        selectFile() {//选择文件
            if (!this.uploading) {
                this.$refs.fileInput.click();
            }
        },
        onFileChange() {
            let file = this.$refs.fileInput.files[0];
            this.uploading = true;
            let formData = new FormData();
            formData.append("file", file)
            this.$http({
                url: this.$http.adornUrl('/sys/oss/upload'),
                method: 'post',
                data: formData
            }).then(({ data }) => {
                console.log(data)
                if (data && data.code === 200) {
                    this.$emit('uploaded', data.url)
                } else {
                    this.$message.error("文件上传失败：" + data.msg)
                }
                this.uploading = false;
            })
        }
    }
}
</script>