原文地址:扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能_艸芔的博客-CSDN博客
扩展element-ui的el-upload上传组件,实现复制粘贴上传图片文件,带图片预览功能
需求说明
原业务系统中的图片上传功能经常使用,普通的添加按钮只能通过系统对话框打开本地计算机目录,
在本地文件夹中选择要上传的图片。
导致在使用业务系统过程中,截图后需要先将图片存储到本地计算机目录,再点击页面图片上传。
在重复使用该功能时会浪费过多的时间在图片保存,上传。
为了解决业务该问题,亟需对该图片上传功能进行改造,避免业务人员过多的时间浪费在图片上传操作。
改造路线
为了简化图片上传步骤,增加直接粘贴 “粘贴板”中的图片文件,做到图片不落地,减少图片上传所需要的操作步骤。
改造前分析
通过对前端框架的分析,当前图片上传功能,采用 element-ui 组件,版本为 2.15.6
实现粘贴图片,需要监听ctrl + v 命令
开始改造
控件改造
在窗口的 el-form 控件参数中添加 @paste.native 事件,事件绑定方法名 handlePaste
也可以在其他控件中添加事件监听,看个人需求。
注意: 监听粘贴事件时,需要当前页面先获取焦点,否则无法正常监听, 可以在页面加载后调用 focus() 获取焦点
粘贴功能Js部分参考资料:https://blog.csdn.net/blue__k/article/details/125296866
<el-form
ref="xxxx"
@paste.native="handlePaste"
:model="form"
label-position="right"
label-width="92px"
class="page-form"
style="width: 100%;"
>
------------------------ 分割线 ----------------------
// el-upload控件不用做任何修改,此处仅作展示
<el-upload
class="el-upload–picture-card"
action=""
:limit="12"
ref="upload"
list-type="picture-card"
:on-preview="handlePictureCardPreview4"
:before-upload="beforeAvatarUpload4"
:on-remove="handleRemove4"
:on-change="handleEditChange4"
:http-request='uploadlinkmanAfter'
:file-list="fileList"
accept=".png,.jpg,.bmp,.jpeg"
:class="{hide:hideUploadEdit4}"
>
<i slot="default" class="el-icon-plus"></i>
<div slot="tip" class="el-upload__tip">
只能上传(png,jpg,bmp,jpeg)图片文件,不超过10MB,只允许上传一份文件
</div>
</el-upload>
23
24
25
26
27
28
29
30
31
32
33
Javascript 实现函数
/**
* 监听粘贴操作
*/
handlePaste(e) {
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.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){
// 上传到图片服务器
xxxxx.uploadImage2OSS(file);
}
},
遇到的问题(可以监听到粘贴事件,但没有生成缩略图)
在生成预览图的时候遇到了粘贴后的图片没有生成预览图片,跟踪到element-ui控件的源码中
先打开开发者工具,发现正常的预览图片 src 属性有 blob:http://localhost/xxxxx
由于该图片的url是本地缓存的图片文件,所以在upload控件中必然有图片缓存函数存在
继续跟踪upload控件有可能创建图片的源码,在index.vue文件第165行(仅供当前版本,其他版本可能有差异)中发现这样一行代码:file.url = URL.createObjectURL(rawFile);
handleStart(rawFile) {
rawFile.uid = Date.now() + this.tempIndex++;
let file = {
status: 'ready',
name: rawFile.name,
size: rawFile.size,
percentage: 0,
uid: rawFile.uid,
raw: rawFile
};
if (this.listType === 'picture-card' || this.listType === 'picture') {
try {
file.url = URL.createObjectURL(rawFile);
} catch (err) {
console.error('[Element Error][Upload]', err);
return;
}
}
this.uploadFiles.push(file);
this.onChange(file, this.uploadFiles);
},
修改后的Javascript函数,调用upload控件中的 handleStart() 函数
/**
* 监听粘贴操作
*/
handlePaste(e) {
var clipboardData = e.clipboardData; // IE
if (!clipboardData) {
//chrome
clipboardData = e.originalEvent.clipboardData;
}
var items='';
items = (e.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){
// 上传到图片服务器
xxxxx.uploadImage2OSS(file);
// 生成预览图
this.$refs.upload.handleStart(file);
}
},