入局了vue3+ts的坑
在实现了粘贴获取到文件elementPlus没法调用组件自动上传
一开始考虑使用 image-clipboard这个插件,但是我使用安装不到我就放弃了
arduino
npm install image-clipboard --save
上述得找源或者使用
arduino
bower install image-clipboard
当然对我来说肯定放弃呀!!!!!!
那就是用window来检测做处理了
ini
const handlePaste = (event: ClipboardEvent) => {
const items = event.clipboardData?.items;
if (items) {
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.type.indexOf('image') !== -1) {
const blob = item.getAsFile();
if (blob) {
// 将粘贴的图片添加到文件列表中
// fileList.value.push({
// name: 'pasted-image.png', // 文件名
// raw: blob, // 文件对象
// url: URL.createObjectURL(blob), // 图片预览链接
// });
// 可以在这里上传图片到服务器
uploadImg(blob);
}
}
}
}
};
上述一开始是准备使用自带的组件上传,但是后面发现
通过ref调用submit()没有办法来实现上传,百思不得其解。
然后就先使用了另外的接口来实现图片的上传,但是这个问题一直烦恼着我,然后就去看了源码
然后打印一下我的文件信息
然后再看我的代码
当我默认没有status时候给我默认success了,那么也就导致我没法接下来的上传,但是我功能都实现了,以我的懒惰肯定不会再去改动一下,
php
fileList.value.push({
name: 'pasted-image.png', // 文件名
raw: blob, // 文件对象
url: URL.createObjectURL(blob), // 图片预览链接
status:'ready'
});
这样在使用ref就可以实现submit();
踩坑之路从未停止