如何转换图片URI并上传到服务器端

时间:2019-06-14 08:48:51

标签: javascript jquery html bootstrap-4 cors

首先,我的目标是将图像的URI转换数据保存到数据库。第二,我试图将图像转换为URI,我成功使用了它:

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
function getDataUri(url, callback) {
    var image = new Image();

    image.onload = function () {
        var canvas = document.createElement('canvas');
        canvas.width = this.naturalWidth; 
        canvas.height = this.naturalHeight; 

        canvas.getContext('2d').drawImage(this, 0, 0);

        // Get raw image data
        callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

        // ... or get as Data URI
        callback(canvas.toDataURL('image/png'));
    };

    image.src = url;
}

$('#btnShowURI').click(function(){
    var a = getDataUri('C:\Users\Public\Pictures\download.jpg', function(dataUri) {
        console.log(dataUri)
});
})

但是,C:\Users\Public\Pictures\download.jpg是硬编码的。我想如果我要使用引导文件上传输入,我不会把手放在文件的路径上(这是必要的,因为我可能需要跨本地文件上传文件)。我还认为CORS可能是一个问题。问题是,如何获取要保存在服务器中的映像的完整文件路径?

0 个答案:

没有答案