一、解决前
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'=>'']);
}