【前端】ajax 接口返回图片文件流，将图片保存至自己服务器，并展示该图片

一、解决前

1.1 问题 描述

ajax 调用第三方接口，接口没有返回图片链接，直接返回的图片。现在要将文件保存至服务器，并返回自身的链接。

// 解决前的代码
let formData = new FormData();
formData.append('file', $("input[name='file']")[0].files[0]);
formData.append('secret', data.field.secret);

$.ajax({
     url: url,
     type: "POST",
     processData: false,
     contentType: false,
     data: formData,
     success: function (data) {
         console.log(data);
     }
 });

二、解决后

解决方式就是：不用 ajax 请求，改为使用 XMLHttpRequest

2.1 问题解决

// JavaScript 代码

var formData = new FormData();
formData.append('file', $("input[name='file']")[0].files[0]);
formData.append('secret', data.field.secret);

let loading = layer.load(2, {shade: [0.1,'#fff'], time: false});

var xhr = new XMLHttpRequest();
xhr.open("post", "https://dev.hiding.com.cn/imagetrace/encode", true);
xhr.responseType = "blob";
xhr.onload = function() {
    layer.close(loading);
    var blob = this.response;
    var formData1 = new FormData();
    formData1.append('file', blob);

    $.ajax({
        type: "post",
        url: "/index/writeRequest",
        async: true,
        data: formData1,
        processData: false,
        contentType: false,
        success: function(res) {
            let response = eval('(' + res + ')');
            if (response.code == 0){
                layer.msg('加密成功，请长按图片保存');
                $("#img_container").attr('src', response.data);
            } else {
                layer.msg('加密失败，请稍后重试');
            }
            return false;
        }
    });
}
xhr.send(formData);

return false;

// php 代码，自身根据需求改动，上传至 oss 等
$tmp_name = $_FILES['file']['tmp_name'];
$name = time() . rand(10000, 99999) . '.jpeg';
$dir_name = WEB_PUBLIC_URL . '/static/images/write/' . $name;
$file_url = WEB_BASE_URL . '/static/images/write/' . $name;
$response = move_uploaded_file($tmp_name, $dir_name);
if($response){
    return json_encode(['code'=>0, 'msg'=>'成功', 'data'=>$file_url]);
} else {
    return json_encode(['code'=>1001, 'msg'=>'失败', 'data'=>'']);
}