最近业务提了个需求 要求在原有的图片上传基础上用微信QQ等工具实现截图,然后粘贴实现上传
实现这个需求并不难,可以使用el-input的paste来实现,下面一起来看代码
<template>
<el-dialog append-to-body width="500px" :visible="visible" title="xx弹窗" :close-on-click-modal="false" @open="openDialog" @close="closeDialog('ruleForm')">
<el-form :model="formModel" :rules="rules" ref="ruleForm" class="demo-ruleForm" label-width="85px">
<el-form-item label="选择" prop="type_no_arr">
<el-select clearable multiple collapse-tags filterable class="input-layout" v-model="formModel.type_no_arr">
<el-option v-for="item in statusArr" :value="item.type_no" :label="item.name" :key="item.id"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="上传图片" prop="apply_image" v-loading="dataLoading">
<el-input
class="mb10 input-layout"
type="textarea"
:rows="2"
placeholder="粘贴图片即可上传"
v-model="uploadImg"
@paste.native="handlePaste"
>
</el-input>
<el-upload
:file-list="srcList"
:action="imageUrl"
:on-success="uploadSuccess.bind(null, srcList)"
:class="{ hideUpload: srcList.length >= 5 }"
accept=".png,.jpg,.jpeg.gif"
list-type="picture-card"
>
<i slot="default" class="iconfont iconda_jiahao fs24"></i>