利用ajax上传图片，并使用CURL调用接口

这是我第一次使用ajax上传文件，并且不通过form表单进行上传，之前使用ajax上传文件时是借助一个叫form.js的文件，可以直接使用$.ajaxSumbmit直接提交表单，但这次不同，就是使用ajax上传，并且将图片信息放在ajax要上传的数据data数组或对象中，怎么办，只好百度一下，百度显示，需要创建一个formData对象，具体代码如下：

html部分代码：

<span>上传图片</span>
<input type="file" accept="" name="image" id="imgPicker" value="">

js部分代码：

var formData = new FormData();
var img = $('#imgPicker')[0].files[0];
formData.append('img',img);
formData.append('title',title);   //其它数据

$.ajax({
    url:URL,
    type:'POST',
    async:true,
    dataType:'json',
    processData:false,
    contentType:false,
    data:formData,
})

PHP部分代码：

$imgInfo = $_FILES;
$title = $_POST['title'];

如此就可以将图片完全通过ajax传到后端了，但是只是成功了一半，还需要将获取的图片和其它一些数据进行处理，处理之后封装数据，调用API，并通过CURL模拟HTTP请求，将封装的数据传送到API，封装数据必须依照API定义的格式，否则返回错误信息，然而最难的一步就是API文件接收的图片方式也是$_FILES，所以传输的img字段的数据类型还是一个文件对象，这时使用的是一个PHP函数curl_file_create的函数创建一个文件对象，PHP端也是需要$_FILES来接收，符合要求，代码如下：

$data['files'] = curl_file_create($path);

$rConn = curl_init($url);
curl_setopt($rConn, CURLOPT_POST, 1); 
curl_setopt($rConn, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($rConn, CURLOPT_POSTFIELDS, $data);
$res = curl_exec($rConn);
curl_close($rConn);
return $res;

解释一波：

curl_init 初始化curl会话，返回curl句柄

curl_setopt中的参数

CURLOPT_POST 为1 代表使用发送POST请求

CURLOPT_RETURNTRANSFER 为1 代表将curl_exec()获取的信息以字符串返回，而不是直接输出

CURLOPT_POSTFIELDS 使用POST发送$data数据或对象

如此，调用API成功，并且返回一个图片保存后的信息。

这个图片上传的逻辑其实就是我在客户端上传一张图片保存到服务器的某个目录中(自定义)，调用API时，再将本地服务器的刚保存的图片通过CURL调用API，将图片再次上传到API所定义要保存到某个服务器的目录下，执行成功后，删除第一台f服务器所保存的图片。

利用ajax上传图片，并使用CURL调用接口

猜你喜欢