发布时间:2023-03-15 文章分类:编程知识 投稿人:王小丽 字号: 默认 | | 超大 打印

代码如下:

我这边用的阿里OSS直传的,主要思路是获取截图对象,粘贴到指定div位置,获取文件流,将文件流赋值给clientUpload方法。

使用wx/qq 快捷指令就可以截图上传图片了。

  <div class="layui-form-item">
<label class="layui-form-label leftLabel">支付图片</label>
<div class="layui-input-inline rightDiv">
<div class="layui-upload-drag">
<div id="test10">
<i class="layui-icon"></i>
<p>点击上传,或将文件拖拽到此处</p>
</div>
<div class="fileListArea" id="saleInfoFormFile"></div>
</div>
</div>
</div>

  

    //截屏 上传
const div = document.getElementById("saleInfoFormFile")
// const img = document.getElementById("img")
function handlePaste(e) {
// 粘贴对象
if (e.clipboardData || e.originalEvent) {
const clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if (clipboardData.items) {
let blob;
for (let i = 0; i < clipboardData.items.length; i++) {
if (clipboardData.items[i].type.indexOf('image') !== -1) {
blob = clipboardData.items[i].getAsFile();
}
}
// // 粘贴数据
console.log(blob, 'blob');
clientUpload(blob, 1);
// // 生成文件对象
// const filer = new FileReader()
// // 将获取的粘贴数据转成 URL格式的字符串(base64编码)
// filer.readAsDataURL(blob)
// // 这个回调在 filer.readAsDataURL(blob) 的时候触发
// filer.onload = (e) => {
//   console.log(e, 'FileReader')
//   // 获取URL格式的字符串 Base64编码
//   const base64 = e.target.result;
//   console.log(base64, 'base64')
//   // 通过img输出
//   img.src = base64   //通过base64直接输出
// };
}
}
}
div.addEventListener('paste', handlePaste);
//OSS直传
function clientUpload(fileItem, fileLength) {
var datetoday = util.getTodayDate();
var randomStr = "/" + new Date().getTime() + util.randomString(4); //  4位随机字符串
var extensionName = fileItem.name.substr(fileItem.name.lastIndexOf(".")); // 文件扩展名
var fileName = "doc/" + datetoday + randomStr + extensionName; // 文件名字(相对于根目录的路径 + 文件名)
var fileType = ''
if (extensionName === '.png' || extensionName === '.jpg' || extensionName === '.jpeg' || extensionName === '.gif') {
fileType = 'image';
} else if (extensionName === '.txt' || extensionName === '.doc' || extensionName === '.xls' || extensionName === '.ppt' || extensionName === '.docx' || extensionName === '.xlsx' || extensionName === '.pptx ' || extensionName === '.pdf ') {
fileType = 'text';
}
client.multipartUpload(fileName, fileItem).then(function (result) {
if (result.res.status === 200) {
arr.push({
ossUrl: result.res.requestUrls[0].split("?")[0],
type: fileType //文件类型 image 图片 text 文件
});
//arr.push(result.res.requestUrls[0].split("?")[0])
if (arr.length >= fileLength) {
renderHtml(result.res.requestUrls[0].split("?")[0]);
layer.close(loading)
}
} else {
layer.msg('文件上传失败');
}
})
}

  

使用wx/qq/等app在项目里截屏上传图片

使用wx/qq/等app在项目里截屏上传图片

使用wx/qq/等app在项目里截屏上传图片