cube-ui upload组件上传图片后如何实现缩略图功能(图片预览))

1.基础用法

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

             @file-click="fileClick"     //缩略图

          >

2.自定义样式  

        <cube-upload

            ref="upload1"

            v-model="files1"

            :action="action"

            :multiple="false"

            :simultaneous-uploads="1"

            :process-file="processFile"

             @files-added="addedHandler1"

             @file-error="errHandler"

             @file-success="uploadSuccess1"

          >

              <cube-upload-file

                    v-for="(file, i) in files1"

                   :file="file"

                    :key="i"

                     @click="fileClick"        //缩略图

              ></cube-upload-file>

              <cube-upload-btn :multiple="false">

                  <img src="~@/icons/camera.svg" />

                    <span>证件正面</span>

              </cube-upload-btn>

         </cube-upload>

自定义样式实现缩略图关键为该css样式，提交图片后会自动显示该样式

 /deep/ .cube-upload-file-status.cubeic-right::after {

        width: 165px;

        height: 110px;

        border-radius: 0;

        background-color: #fff0;  

    }

以下为公用方法

        uploadSuccess1(res) {  

            this.imgs = [];

            this.imgs.push(res.url);

        } 

         fileClick() {

                    this.$createImagePreview({   //cube-ui  自带图片预览

                        imgs: this.imgs

                    }).show(）

        },