element上传增加粘贴上传图片功能

                                    <el-upload class="upload-demo ml"  ref="uploadMutiple"
                                        action="http://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile"
                                        list-type="picture-card" :data="myData" multiple drag
                                        :on-preview="handlePreviewThank" :on-remove="handleRemoveThank"
                                        :file-list="thankFileList" :on-success="handlesuccessThank"
                                        :before-upload="beforeAvatarUploadThank"
                                        accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP,.PDF">
                                        <i class="el-icon-plus"></i>
                                    </el-upload>
                                    <div id="preview" @paste="handlePaste">
                                        <span><i class="el-icon-s-opportunity" style="color:#FB894C"></i>点击此处<br>将图片按Ctrl+V
                                            粘贴至此处</span>
                                    </div>
 // 监听粘贴操作
            handlePaste(event) {
                const items = (event.clipboardData || window.clipboardData).items;
                let file = null;
                if (!items || items.length === 0) {
                    this.$message.error("当前浏览器不支持本地");
                    return;
                }
                // 搜索剪切板items
                for (let i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf("image") !== -1) {
                        file = items[i].getAsFile();
                        break;
                    }
                }
                if (!file) {
                    this.$message.error("粘贴内容非图片");
                    return;
                }
                if (this.fileList.length >= this.limit) {
                    this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`); // 图片数量超出
                    return
                }
                this.$refs.uploadMutiple.handleStart(file);// 将粘贴过来的图片加入预上传队列
                this.$refs.uploadMutiple.submit(); // 提交图片上传队列
            },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值