Question

我已经查看了很多有关堆栈溢出的类似问题，并尝试了上述解决方案，但没有一个对我有用。老实说，我不知道我在做什么错。

此处是代码段...

Node.JS ServerFile

function uploadAvatar(request){
return new Promise(function(resolve){
    if(request.sessionObject.username){
        base64 = (request.postObject.data).replace(/^data:image\/png;base64,/, "");
        fpath = __dirname + "/gg/avatars/" + request.sessionObject.username + ".png";
        fs.writeFile(fpath, base64, 'base64', function(err) {
            alertObject = alertObj("success","Success","You have succesfully uploaded an avatar.", false, false, 2000);
            resolve(alertObject);
        });
    }else{
        alertObject = alertObj("danger","Error","You must be logged in in order to upload an avatar.", false, false, 2000);
        resolve(alertObject);
    }
});
}

app.post("*", function(request, response, next){
postObject = {};
for(x in request.body){
    postObject[x] = sanitizer.sanitize(request.body[x]);
}
request.postObject = postObject;

function r(html, obj){
    response.render(html, obj);
}

switch(request.originalUrl){
    case "/uploadAvatar":
    uploadAvatar(request).then(function(alertObject){ r('HTML_Alert', {alertObject}) });
    break;
}

HTML_Modal（查看文件）

<div class="modal fade" id="uploadAvatar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header background-dark">
    <img src="/upload.png" width="30px" height="30px" />
    <h5 class="modal-title">Upload Avatar</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form id="upload-avatar">
      <label class="lead w-100 text-center">Please select an Image</label>
      <p id="image-response" class="text-center"></p>
      <div id="image-container" class="mx-auto p-2 border-dark background-darkest img-thumbnail">
        <img src="/load.png" style="left: 50%; position: absolute; margin-left: -25px; top: 50%; margin-top: -50px;"/>
      </div><br/>
      <input type="file" id="avatar-image-upload" class="form-control" onchange="imageResizer(event)" accept="image/*"/>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-dark" onClick="uploadAvatar();">Upload</button>
  </div>
</div>
</div>
</div>

JavaScript文件

function xhttpz(action, dataSTR, cb){
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        if(cb){
            cb(this.responseText);
        }
    }
}
xhttp.open("POST", action, true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(dataSTR);    
}

function imageResizer(event){
img = document.getElementById('image-avatar');
if(img){
    img.remove();
}
document.getElementById('image-container').innerHTML = "";
if(event.target.files[0].size < 500000){
    var files = event.target.files;
    var file = files[0];
    imageAvatar = document.createElement('img');
    imageAvatar.id = "image-avatar";
    if (file) {
    var reader = new FileReader();
    reader.onload = function(e) {
        imageAvatar.src = e.target.result;
        document.getElementById('image-container').appendChild(imageAvatar);
    };
    reader.readAsDataURL(file);
    }
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var filesToUploads = document.getElementById('avatar-image-upload').files;
        var file = filesToUploads[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                var img = document.createElement("img");
                img.src = e.target.result;
                var canvas = document.createElement("canvas");
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0);
                var MAX_WIDTH = 300;
                var MAX_HEIGHT = 225;
                var width = img.width;
                var height = img.height;
                if (width > height) {
                    if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                    }
                } else {
                    if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                    }
                }
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, width, height);
                dataurl = canvas.toDataURL();
                document.getElementById('image-avatar').src = dataurl;
                document.getElementById('image-response').innerHTML = "Please wait as we upload your image.";
                document.getElementById('image-response').classList.add('text-success');
                document.getElementById('image-response').classList.remove('text-danger');
                xhttpz("/uploadAvatar", "data="+document.getElementById('image-avatar').src, function(responseHTML){
                    console.log(responseHTML);
                });
            }
            reader.readAsDataURL(file);
        }
    }else{
        document.getElementById('image-response').innerHTML = "Your browser does not support our API. Please consider using Chrome.";
        document.getElementById('image-response').classList.add('text-danger');
        document.getElementById('image-response').classList.remove('text-success');
    }
}else{
    document.getElementById('image-response').innerHTML = "Please ensure your image is under 500KB.";
    document.getElementById('image-response').classList.add('text-danger');
    document.getElementById('image-response').classList.remove('text-success');
}
}

注意：request.postObject.data变量是png图像的base64字符串。（如果正确）

大多数代码都是多余的，但是我只是为了帮助发现问题而保留所有代码。

因此，我一直遇到的问题是文件可以完美地保存到指定的文件路径中，但是文件本身要么不可读，要么已损坏。本质上，我想做的就是在服务器上将base64字符串另存为png图像。

请注意我正在使用Node.js

我知道这可能是一个重复的问题，但是我已经尝试过我们针对类似主题发布的所有解决方案，但都没有奏效。

Answer 1

请确保使用https://www.base64-image.de/之类的工具对base64变量进行正确解码，并确保fpath变量正确。

然后

require("fs").writeFile(fpath, base64, 'base64', function(err) {
  console.log(err);
});

应该工作

编辑：

只需尝试

xhttpz("/uploadAvatar", document.getElementById('image-avatar').src, function(responseHTML){
    console.log(responseHTML);
});

和

base64 = (request.data).replace(/^data:image\/png;base64,/, "");

Answer 2

替换xhttpz函数

xhttpz("/uploadAvatar", "data="+document.getElementById('image-avatar').src, 
function(responseHTML){
    console.log(responseHTML);
});

使用

xhr.open("POST","/uploadAvatar",true);
xhr.setRequestHeader('Content-Type','x-www-form-urlencoded');
xhr.send("Filedata="+imageAvatar.src);

然后更改base64变量以引用新声明的“ Filedata”。

fpath = (__dirname + "/html/avatars/" + sessionObject.username + ".png");
var bodyStr = '';
request.on("data",function(chunk){
    bodyStr += chunk.toString();
});
request.on("end",function(){
    base64 = (bodyStr).replace("Filedata=data:image/png;base64,","");
    fs.writeFile(fpath, base64, 'base64', function(err){
        alertObject = alertObj("success","Success","You have successfully uploaded an avatar.", false, true, 2000);
        resolve(alertObject);
    });
});

在nodeJS服务器上保存base64 PNG图像

2 个答案: