zoukankan      html  css  js  c++  java
  • [javascript] elementui和vue下复制粘贴上传图片

    监听事件

    mounted() {

            document.addEventListener('paste', this.onPasteUpload)

     }

    粘贴的时候组装formData  , 下面代码中的文件域name属性是 imagefile ,,然后调用jquery的ajax方法传过去 , 后端和普通文件一样就可以 , 返回文件上传后路径

    var formData = new FormData();

    formData.append('imgfile', file);

    效果可以直接点击本页面的与我交流 , 粘贴上传一张图片

            //粘贴上传图片
            onPasteUpload(event){
                let items = event.clipboardData && event.clipboardData.items;
                let file = null
                if (items && items.length) {
                    // 检索剪切板items
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf('image') !== -1) {
                            file = items[i].getAsFile()
                        }
                    }
                }
                if (!file) {
                    return;
                }
                let _this=this;
                var formData = new FormData();
                formData.append('imgfile', file);
                $.ajax({
                    url: '/uploadimg',
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    dataType: 'JSON',
                    mimeType: "multipart/form-data",
                    success: function (res) {
    
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }
        },
        mounted() {
            document.addEventListener('paste', this.onPasteUpload)
        },
  • 相关阅读:
    《大道至简》读后感
    PowerBuilder学习笔记之1开发环境
    PowerBuilder学习笔记之14用户自定义对象
    查询数据库大小的代码
    JAVA基础_修饰符
    SQLSERVER查询存储过程内容
    Asp.Net WebAPI中Filter过滤器的使用以及执行顺序
    运算符
    判断(if)语句
    变量的命名
  • 原文地址:https://www.cnblogs.com/taoshihan/p/13714915.html
Copyright © 2011-2022 走看看