vue文件上传

用的是iview的ui库中的upload组件：

        <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"
              :before-upload="handleBeforeUpload"
              multiple
              type="drag"
              :action="uploadUrl"
              style="display:inline-block;width:80px;"
              v-show="uploadList && uploadList.length < 5">
              <div style="width:80px;height:80px;padding-top:5px;color:#888;">
                <div style="font-size:25px">
                  +
                  <p style="font-size:14px">上传</p>
                </div>
              </div>
        </Upload>

效果如下：

效果图

但是要改成点击上传先弹框，然后可以选择本地上传或者素材库选取，如下图：

效果图
方法：

<Upload
      :ref="config.id"
      :show-upload-list="false"
      :on-success="handleSuccess"
      :format="config.format"
      :max-size="config['max-size']"
      :headers="config.headers"
      :on-format-error="handleFormatError"
      :on-error="handleUploadError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      multiple
      type="drag"
      :action="config.action"
      v-show="uploadList && uploadList.length <  config.limitNum"
      style="display: inline-block;"
    >
      <div style="width:100px;height:100px;padding-top: 15px;color:rgb(133, 133, 133);">
        <div style="font-size:25px;">
          +
          <p style="font-size:14px;text-align:center;">上传{{typeText}}</p>
        </div>
      </div>
      <!-- 在点击上传处加一个遮罩层，点击后不执行upload的上传，而是弹窗 -->
      <div
        style="position:absolute;opacity:0;width:100px;height:100px;left:0;top:0;"
        @click.stop="selectType"
      ></div>
    </Upload>

在弹窗上点击本地上传时，通过ref获取当前upload，触发upload的handleClick()方法即可。