您现在的位置是:首页 > Javascript
当前栏目
[javascript] elementui和vue下复制粘贴上传图片
2023-02-18 15:36:31 时间
监听事件
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) },
相关文章
- JavaScript 里三个点 ...,可不是省略号啊···
- ASP.NET Core project.json imports 是什么意思?
- 循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
- 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
- ASP.NET Core WebApi 返回统一格式参数(Json 中 Null 替换为空字符串)
- tsconfig.json在配置文件中找不到任何输入,怎么办?
- C#开发微信门户及应用(40)--使用微信JSAPI实现微信支付功能
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
- 基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用
- ASP.NET Core 返回 Json DateTime 格式
- jQuery.template.js 简单使用
- JavaScript 解决 onblur 与 onclick 冲突
- highlight.js 代码高亮插件
- JavaScript sync and async(同步和异步)
- 【记录】JS 获取图片原始尺寸-防止图片溢出
- 认识一下什么是JSP
- js日志输出还是只会console.log么,那你就out了
- Jackson精讲第7篇-类继承关系下的JSON序列化与反序列化JsonTypeInfo
- Jaskson精讲第6篇-自定义JsonSerialize与Deserialize实现数据类型转换
- @JsonCreator自定义反序列化函数-JSON框架Jackson精解第5篇