使用wx/qq/等app在项目里截屏上传图片
代码如下：我这边用的阿里OSS直传的，主要思路是获取截图对象，粘贴到指定div位置，获取文件流，将文件流赋值给clientUpload方法。
使用wx/qq 快捷指令就可以截图上传图片了。
<label >支付图片</label>
<i></i>
<p>点击上传，或将文件拖拽到此处</p>
//截屏 上传
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.type.indexOf('image') !== -1) {
blob = clipboardData.items.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.split("?"),
type: fileType //文件类型 image 图片 text 文件
});
//arr.push(result.res.requestUrls.split("?"))
if (arr.length >= fileLength) {
renderHtml(result.res.requestUrls.split("?"));
layer.close(loading)
}
} else {
layer.msg('文件上传失败');
}
})
}
来源:https://www.cnblogs.com/yxg2852/p/17214479.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]