iview/examples/routers/upload.vue

<!--<template>-->
    <!--<div>-->
        <!--<div class="demo-upload-list" v-for="item in uploadList">-->
            <!--<template v-if="item.status === 'finished'">-->
                <!--<img :src="item.url">-->
                <!--<div class="demo-upload-list-cover">-->
                    <!--<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>-->
                    <!--<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>-->
                <!--</div>-->
            <!--</template>-->
            <!--<template v-else>-->
                <!--<i-progress v-if="item.showProgress" :percent="item.percentage" hide-info></i-progress>-->
            <!--</template>-->
        <!--</div>-->
        <!--<Upload-->
                <!--ref="upload"-->
                <!--:show-upload-list="false"-->
                <!--:default-file-list="defaultList"-->
                <!--:on-success="handleSuccess"-->
                <!--:format="['jpg','jpeg','png']"-->
                <!--:max-size="2048"-->
                <!--:on-format-error="handleFormatError"-->
                <!--:on-exceeded-size="handleMaxSize"-->
                <!--@on-progress="handleProgress"-->
                <!--:before-upload="handleBeforeUpload"-->
                <!--multiple-->
                <!--type="drag"-->
                <!--action="//jsonplaceholder.typicode.com/posts/"-->
                <!--style="display: inline-block;width:58px;">-->
            <!--<div style="width: 58px;height:58px;line-height: 58px;">-->
                <!--<Icon type="camera" size="20"></Icon>-->
            <!--</div>-->
        <!--</Upload>-->
        <!--{{ visible }}-->
    <!--</div>-->
<!--</template>-->
<!--<script>-->
    <!--export default {-->
        <!--data () {-->
            <!--return {-->
                <!--defaultList: [-->
                    <!--{-->
                        <!--'name': 'a42bdcc1178e62b4694c830f028db5c0',-->
                        <!--'url': 'https://o5wwk8baw.qnssl.com/a42bdcc1178e62b4694c830f028db5c0/avatar'-->
                    <!--},-->
                    <!--{-->
                        <!--'name': 'bc7521e033abdd1e92222d733590f104',-->
                        <!--'url': 'https://o5wwk8baw.qnssl.com/bc7521e033abdd1e92222d733590f104/avatar'-->
                    <!--}-->
                <!--],-->
                <!--imgName: '',-->
                <!--visible: false,-->
                <!--uploadList: []-->
            <!--}-->
        <!--},-->
        <!--computed: {-->
<!--//            uploadList () {-->
<!--//                return this.$refs.upload ? this.$refs.upload.fileList : [];-->
<!--//            }-->
        <!--},-->
        <!--watch: {-->

        <!--},-->
        <!--mounted () {-->
            <!--this.uploadList = this.$refs.upload.fileList;-->
<!--//            console.log(this.$refs.upload.fileList)-->
        <!--},-->
        <!--methods: {-->
            <!--handleView (name) {-->
                <!--this.imgName = name;-->
                <!--this.visible = true;-->
            <!--},-->
            <!--handleRemove (file) {-->
                <!--// 从 upload 实例删除数据-->
                <!--const fileList = this.$refs.upload.fileList;-->
                <!--this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);-->
            <!--},-->
            <!--handleSuccess (res, file) {-->
                <!--// 因为上传过程为实例，这里模拟添加 url-->
                <!--file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';-->
                <!--file.name = '7eb99afb9d5f317c912f08b5212fd69a';-->
            <!--},-->
            <!--handleFormatError (file) {-->
                <!--this.$Notice.warning({-->
                    <!--title: '文件格式不正确',-->
                    <!--desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'-->
                <!--});-->
            <!--},-->
            <!--handleMaxSize (file) {-->
                <!--this.$Notice.warning({-->
                    <!--title: '超出文件大小限制',-->
                    <!--desc: '文件 ' + file.name + ' 太大，不能超过 2M。'-->
                <!--});-->
            <!--},-->
            <!--handleBeforeUpload () {-->
                <!--const check = this.uploadList.length < 5;-->
                <!--if (!check) {-->
                    <!--this.$Notice.warning({-->
                        <!--title: '最多只能上传 5 张图片。'-->
                    <!--});-->
                <!--}-->
                <!--return check;-->
            <!--},-->
            <!--handleProgress (s) {-->
                <!--console.log(s)-->
            <!--}-->
        <!--}-->
    <!--}-->
<!--</script>-->
<!--<style>-->
    <!--.demo-upload-list{-->
        <!--display: inline-block;-->
        <!--width: 60px;-->
        <!--height: 60px;-->
        <!--text-align: center;-->
        <!--line-height: 60px;-->
        <!--border: 1px solid transparent;-->
        <!--border-radius: 4px;-->
        <!--overflow: hidden;-->
        <!--background: #fff;-->
        <!--position: relative;-->
        <!--box-shadow: 0 1px 1px rgba(0,0,0,.2);-->
        <!--margin-right: 4px;-->
    <!--}-->
    <!--.demo-upload-list img{-->
        <!--width: 100%;-->
        <!--height: 100%;-->
    <!--}-->
    <!--.demo-upload-list-cover{-->
        <!--display: none;-->
        <!--position: absolute;-->
        <!--top: 0;-->
        <!--bottom: 0;-->
        <!--left: 0;-->
        <!--right: 0;-->
        <!--background: rgba(0,0,0,.6);-->
    <!--}-->
    <!--.demo-upload-list:hover .demo-upload-list-cover{-->
        <!--display: block;-->
    <!--}-->
    <!--.demo-upload-list-cover i{-->
        <!--color: #fff;-->
        <!--font-size: 20px;-->
        <!--cursor: pointer;-->
        <!--margin: 0 2px;-->
    <!--}-->
<!--</style>-->


<template>
    <div>
        <Upload action="//jsonplaceholder.typicode.com/posts/" :before-upload="handleBeforeUpload" ref="file">
            <i-button type="ghost" icon="ios-cloud-upload-outline">选择文件</i-button>
        </Upload>
        <i-button @click.native="handleUpload">上传</i-button>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                file: null
            }
        },
        methods: {
            handleBeforeUpload (file) {
                this.file = file;
                return false;
            },
            handleUpload () {
                this.$refs.file.post(this.file);
            }
        }
    }
</script>