代碼如下:
我這邊用的阿里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" style="padding: 10px;width: 100%;">
<div id="test10">
<i class="layui-icon" style="font-size: 30px;"></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) 的時候觸發(fā)
// 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('文件上傳失敗');
}
})
}



浙公網安備 33010602011771號