我们可以发送没有任何形式的文件并上传吗

Question

我有一个使用 html2canvas 从表格中截屏的按钮 然后获取它的dataurl并将其放在img元素src上 之后我想发送这张我放在 img 元素 src 上的图像，使用 ajax （为了获得更多帮助，我正在处理 sharepoint，我想从网格中获取屏幕截图并将其发送到库以保存此图片） 按钮点击js

window.take = function () {
alert('screen');
html2canvas(document.querySelector("#c_Grid1")).then(canvas => {

document.body.appendChild(canvas)
let pnGImage = convertCanvasToImage(canvas);
document.body.appendChild(pnGImage);
$("body").append( "<img id='screenshot' src='"+ pnGImage +"'>" );
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', upFile);

});
}
take();

图片发送函数

function convertCanvasToImage(canvas) {
  let image = new Image();
  image.src = canvas.toDataURL();
  return image;
}




        var arrayBuffer;  
        var fileInput; 
           var attachmentFiles; 
           
        function upFile()  
        {  
        
                   console.log('upFile');
            //Get File Input Control and read th file name  
            var element = $("#screenshot");
            img =  element.attr('src');
            if(element.length > 0){
              var file = img
             var fileName = "test.png";  
            //Read File contents using file reader  
            var reader = new FileReader();  
            reader.onload = function(e)  
            {  
                uploadFile(e.target.result, fileName);  
            }  
            reader.onerror = function(e)  
            {  
                alert(e.target.error);  
            }  
            reader.readAsArrayBuffer(file);  
            
            }
            
        }  
        
        function tester(){
        console.log('nothing')
        }
 
  
        function uploadFile(arrayBuffer, fileName)  
        {  
           console.log('uploadFile');
            //Get Client Context,Web and List object.  
            var clientContext = new SP.ClientContext();  
            var oWeb = clientContext.get_web();  
            var oList = oWeb.get_lists().getByTitle('emailingdocument');  
            //Convert the file contents into base64 data  
            var bytes = new Uint8Array(arrayBuffer);  
            var i, length, out = '';  
            for (i = 0, length = bytes.length; i < length; i += 1)  
            {  
                out += String.fromCharCode(bytes[i]);  
            }  
            var base64 = btoa(out);  
            //Create FileCreationInformation object using the read file data  
            var createInfo = new SP.FileCreationInformation();  
            createInfo.set_content(base64);  
            createInfo.set_url(fileName);  
            //Add the file to the library  
            var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
            //Load client context and execcute the batch  
            clientContext.load(uploadedDocument);  
            clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
        }  
  
        function QuerySuccess()  
        {  
            console.log('File Uploaded Successfully.');  
        }  
  
        function QueryFailure(sender, args)  
        {  
            console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());  
        }  

Answer 1

我问了我的问题，这就是答案

画布截图我们应该将其转换为base64以便使用它

然后我们需要从我们的字符串中删除 data:/image ... ，然后将其转换为 blob 使用filerader上传和保存文件

function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}



var contentType = 'image/png';

function convertCanvasToImage(canvas) {
    return canvas.toDataURL();
}

var arrayBuffer;
var fileInput;
var attachmentFiles;

function upFile() {

    console.log('upFile');
    //Get File Input Control and read th file name  
    var element = $("#screenshot");
    var str = element.attr('src');
    var img = str.replace("data:image/png;base64,", "");
    var blob = b64toBlob(img,contentType);
    var blobUrl = URL.createObjectURL(blob);

        var file = blob;
        var fileName = "test.png";
        uploadFile();
        //Read File contents using file reader  
        var reader = new FileReader();
        reader.onload = function (e) {
            uploadFile(e.target.result, fileName);
        }
        reader.onerror = function (e) {
            alert(e.target.error);
        }
        reader.readAsArrayBuffer(file);


}

function tester() {
    console.log('nothing')
}


function uploadFile(arrayBuffer, fileName)
{
    //Get Client Context,Web and List object.  
    var clientContext = new SP.ClientContext();
    var oWeb = clientContext.get_web();
    var oList = oWeb.get_lists().getByTitle('emailingdocument');
    //Convert the file contents into base64 data  
    var bytes = new Uint8Array(arrayBuffer);
    var i, length, out = '';
    for (i = 0, length = bytes.length; i < length; i += 1) {
        out += String.fromCharCode(bytes[i]);
    }
    var base64 = btoa(out);
    //Create FileCreationInformation object using the read file data  
    var createInfo = new SP.FileCreationInformation();
    createInfo.set_content(base64);
    createInfo.set_url(fileName);
    //Add the file to the library  
    var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
    //Load client context and execcute the batch  
    clientContext.load(uploadedDocument);
    clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
}

function QuerySuccess() {
    console.log('File Uploaded Successfully.');
}

function QueryFailure(sender, args) {
    console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
}