我不管，我就是要先來一個(gè)好看的小姐姐。

mua

引言

之前用VUE + VUX做了一個(gè)VUE單頁應(yīng)用，在beta版本因?yàn)殚_發(fā)速度需要沒有設(shè)計(jì)圖片上傳功能。這兩天將其補(bǔ)上，其中踩了很多坑，寫出來分享一下。

前端要做的 ( Ajax )

vue-source 下的http請(qǐng)求

在之前寫ajax請(qǐng)求一直是使用jQ.ajax()的，在vue中的使用姿勢為

GET請(qǐng)求

let url = "http://www.iimt.me"
var data = {
    ......
}
this.$http.get( url, data )
    .then( (res) => {
        console.log(res)
    })

POST請(qǐng)求

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()對(duì)象，然后使用post方法即可。
下面是我的代碼
HTML

<input type="file" ref="files" accept="image/*" multiple>

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)
    })

這里有個(gè)特別的地方，form在控制臺(tái)是打印不出來的，但其實(shí)里面append之后是有東西的，我在這里糾結(jié)了很長時(shí)間

PHP后端處理

首先是header的處理，由于我這段時(shí)間還需要在本地調(diào)試，所以我直接將域開放了。
以下我是我的uploader.php中的header設(shè)置

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是可以在前端中設(shè)置請(qǐng)求頭加上去的。

之后就是獲取文件，移動(dòng)臨時(shí)文件到指定文件夾里。

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

上面的move_upload_file()方法是覆蓋文件的，因?yàn)樾枰聢D片所以沒有驗(yàn)證是否原來存在同名的文件。
可以使用file_exist()方法檢測同名文件，將其重命名或移動(dòng)。

由于服務(wù)器直傳到七牛云比較方便，所以我采取先將用戶的圖片保存在服務(wù)器中，再傳到七牛云的方法。

上傳到七牛云

在七牛云的個(gè)人中心，密匙管理中得到AK與SK

AK與SK

在七牛云官方下載PHP-SDK后部署到服務(wù)器中，獲取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);

然后生成上傳憑證，在生成之前，需要先構(gòu)造參數(shù)。
七牛云默認(rèn)不是覆蓋上傳的，即相同文件名的不會(huì)覆蓋，所以這里需要添加一個(gè)keyToOverwrite的參數(shù)，與上傳的文件名相同
具體看代碼

$bucket = "iimtimg"; //就是七牛云的存儲(chǔ)空間列表
$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()就是上傳動(dòng)作，如果上傳覆蓋的話，查看外鏈還是看到的之前的圖片，由于七牛云的緩存機(jī)制，需要刷新一下此條外鏈，否則會(huì)過一段時(shí)間才能看到最新的照片。

刷新url

use \Qiniu\Cdn\CdnManager;

$urls = array($img_url);
$cdnManager = new CdnManager($auth);
list($refreshResult, $refreshErr) = $cdnManager->refreshUrls($urls);

這個(gè)時(shí)候上傳的文件就能及時(shí)更新到最新狀態(tài)。

OK,job done!

我是 iimT，一個(gè)想寫點(diǎn)東西喜歡分享的大帥比。

微信公眾號(hào) : iimT 　　個(gè)人博客： iimT的個(gè)人博客