Blame view

public/vues/components/tools/upload.vue 2.67 KB
1 2
<template>
    <div class="upload">
郭成尧 authored
3
        <form ref="form" @change="upload">
4 5 6 7 8 9 10
            <input :id="inputId" type="file" name="filename" accept="image/*">
        </form>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
陈峰 authored
11 12
    const modal = require('js/plugin/modal2');
    const tip = require('js/plugin/tip');
13 14 15 16 17 18 19 20 21 22

    module.exports = {
        props: ['imageList', 'bucket'],
        data() {
            return {
                inputId: 'input-' + Math.floor(Math.random() * 999999999) // 尽可能保证 input ID 唯一
            };
        },
        methods: {
            upload(e) {
郭成尧 authored
23
                const formData = new FormData(this.$refs.form);
24 25 26 27 28 29

                formData.append('bucket', this.bucket || '');
                $.ajax({
                    method: 'POST',
                    url: '/api/upload/image',
                    data: formData,
毕凯 authored
30 31
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false // 告诉jQuery不要去设置Content-Type请求头
32 33 34 35 36 37 38 39 40 41 42
                }).then(res => {
                    e.target.value = '';

                    if (res.code === 200) {
                        res.data.imagesList.forEach(imagesPath => {
                            this.imageList.push(imagesPath);
                        });
                    } else {
                        modal.alert(res.message);
                    }
                })
毕凯 authored
43 44
                    .fail(jqXhr => {
                        let message;
45
毕凯 authored
46 47 48 49 50 51 52
                        switch (jqXhr.status) {
                            case 413:
                                message = '图片太大了~';
                                break;
                            default:
                                message = '上传出错~';
                        }
53
毕凯 authored
54 55
                        tip.show(message);
                    });
56 57 58 59 60
            }
        }
    };
</script>
陈峰 authored
61
<style lang="scss">
62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96
    /* 每个地方上传按钮可能不一样,使用的时候自己写样式 */
    .upload {
        position: relative;
        border: 1px solid #b0b0b0;

        &:after,
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 2px;
            margin-left: -50px;
            margin-top: -1px;
            background-color: #b0b0b0;
        }

        &:before {
            transform: rotate(90deg);
        }

        input {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    }

</style>