使用wx/qq/等app在项目里截屏上传图片
导读：代码如下：...
代码如下：
我这边用的阿里OSS直传的 ，主要思路是获取截图对象 ，粘贴到指定div位置 ，获取文件流 ，将文件流赋值给clientUpload方法 。
使用wx/qq 快捷指令就可以截图上传图片了 。
//截屏 上传
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(文件上传失败);
}
})
}
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！