我不管,我就是要先来一个好看的小姐姐。
####引言
之前用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
在七牛云官方下载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的个人博客