用的是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()方法即可。
