JS使用base64格式上传文件

使用base64格式上传文件具有将文件转换成字符串的优势，可以直接在前端将文件上传到服务器，无需将文件先发送到服务器再进行处理。下面详细讲解JS使用base64格式上传文件的完整攻略。

步骤一：将文件转换成base64字符串

在前端中使用FileReader对象读取文件内容，然后将文件内容转换成base64字符串。

function readFile(file) {
    // 使用FileReader对象读取文件内容
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        let result = reader.result;
        // 将文件内容转换成base64字符串
        let base64Str = result.split(",")[1];
        // 将base64字符串传递给后端
        sendBase64(base64Str);
    }
}

步骤二：将base64字符串上传到服务器

使用ajax发送POST请求将base64字符串上传到服务器。

function sendBase64(base64Str){
    $.ajax({
        url: "/upload",
        type: "POST",
        data: {
            base64Str: base64Str
        },
        success: function (response) {
            console.log(response);
        },
        error: function (err) {
            console.log(err);
        }
    });
}

在服务器端，接收到base64字符串之后，先将其转换成文件内容，再进行保存操作。

示例一：上传图片

<input type="file" onchange="readFile(this.files[0])">

function readFile(file) {
    // 判断选择的文件是否为图片类型
    if (!/^image\//.test(file.type)) {
        alert("请选择图片");
        return;
    }
    // 使用FileReader对象读取文件内容
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        let result = reader.result;
        // 将文件内容转换成base64字符串
        let base64Str = result.split(",")[1];
        // 将base64字符串传递给后端
        sendBase64(base64Str);
    }
}

示例二：上传PDF文件

<input type="file" onchange="readFile(this.files[0])">

function readFile(file) {
    // 判断选择的文件是否为PDF类型
    if (!/^application\/pdf/.test(file.type)) {
        alert("请选择PDF文件");
        return;
    }
    // 使用FileReader对象读取文件内容
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        let result = reader.result;
        // 将文件内容转换成base64字符串
        let base64Str = result.split(",")[1];
        // 将base64字符串传递给后端
        sendBase64(base64Str);
    }
}