欢迎光临
我的个人博客网站

[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)     },

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » [javascript] elementui和vue下复制粘贴上传图片
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏