phpajax上传文件到服务器,前端ajax + 后端PHP上传图片到七牛云踩的一些坑

我不管，我就是要先来一个好看的小姐姐。

mua

引言

之前用VUE + VUX做了一个VUE单页应用，在beta版本因为开发速度需要没有设计图片上传功能。这两天将其补上，其中踩了很多坑，写出来分享一下。

前端要做的 ( Ajax )

vue-source 下的http请求

在之前写ajax请求一直是使用jQ.ajax()的，在vue中的使用姿势为

GET请求

let url = "http://www.iimt.me"

var data = {

......

}

this.$http.get( url, data )

.then( (res) => {

console.log(res)

})

POST请求

let url = "http://www.iimt.me"

var data = {

......

}

this.$http.post( url, data )

.then( (res) =>{

console.log(res)

})

简写

let url = "http://www.iimt.me"

var data = {

......

}

this.$http({

method:"GET",

url:url,

data:data,

headers: {......},

emulateJSON: true

}).then( (res) => {

console.log(res)

})

上传文件

上传文件需要将文件封装为FormData()对象，然后使用post方法即可。

下面是我的代码

HTML

js

var files = this.$refs.files.files[0]

var form = new FormData()

form.append("file",files)

let upload_url = ......

this.$http.post(upload_url, form)

.then( (res) => {

console.log(res.data)

})

这里有个特别的地方，form在控制台是打印不出来的，但其实里面append之后是有东西的，我在这里纠结了很长时间

PHP后端处理

首先是header的处理，由于我这段时间还需要在本地调试，所以我直接将域开放了。

以下我是我的uploader.php中的header设置

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

header("Access-Control-Allow-Methods: GET, POST, PUT,DELETE"); //重要

header("Content-Type: multipart/form-data; charset=utf-8");

前三条是上传文件必要的，第四条的Content-Type是可以在前端中设置请求头加上去的。

之后就是获取文件，移动临时文件到指定文件夹里。

$file = $_FILES["file"];

$flag = move_uploaded_file($_FILES["file"]["tmp_name"],"../avatar/" . $_FILES["file"]["name"]);

上面的move_upload_file()方法是覆盖文件的，因为需要更新图片所以没有验证是否原来存在同名的文件。

可以使用file_exist()方法检测同名文件，将其重命名或移动。

由于服务器直传到七牛云比较方便，所以我采取先将用户的图片保存在服务器中，再传到七牛云的方法。

上传到七牛云

在七牛云的个人中心，密匙管理中得到AK与SK

AK与SK

在七牛云官方下载PHP-SDK后部署到服务器中，获取token

require_once "qiniu-sdk/autoload.php";

use Qiniu\Auth;

use Qiniu\Storage\UploadManager;

$access_key = "......";

$secret_key = "......";

$auth = new Auth($access_key, $secret_key);

然后生成上传凭证，在生成之前，需要先构造参数。

七牛云默认不是覆盖上传的，即相同文件名的不会覆盖，所以这里需要添加一个keyToOverwrite的参数，与上传的文件名相同

具体看代码

$bucket = "iimtimg"; //就是七牛云的存储空间列表

$expires = 3600;

$policy = null;

$key = "pic-". $_GET["id"].".".end(explode(".", $_FILES["file"]["name"]));

$keyToOverwrite = $key;

$token = $auth->uploadToken($bucket, $keyToOverwrite, $expires, $policy, true);

list($ret, $err) = $uploadMgr->putFile($token, $key, $filePath);

if ($err !== NULL) {

echo "false";

} else {

$img_url = "http://oqapmzmc9.bkt.clouddn.com/".$ret["key"];

echo $img_url;

}

其中的putFile()就是上传动作，如果上传覆盖的话，查看外链还是看到的之前的图片，由于七牛云的缓存机制，需要刷新一下此条外链，否则会过一段时间才能看到最新的照片。

刷新url

use \Qiniu\Cdn\CdnManager;

$urls = array($img_url);

$cdnManager = new CdnManager($auth);

list($refreshResult, $refreshErr) = $cdnManager->refreshUrls($urls);

这个时候上传的文件就能及时更新到最新状态。

OK,job done!

我是 iimT，一个想写点东西喜欢分享的大帅比。

微信公众号 : iimT 　　个人博客： iimT的个人博客