前端上傳圖片到七牛雲
阿新 • • 發佈：2018-12-08
先說一下大致思路，前端到後臺獲取七牛上傳token，前端上傳圖片到七牛，成功後將圖片地址返回給後臺。
廢話不說，直接貼程式碼（極簡版）
<html> <head> <!--引入jquery--> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> </head> <body> <form id="upload"> <input type="file" name="file"><!--選擇圖片--> <!--獲取並填寫token 可後臺java或php生成即可--> <input type="text" name="token" value=''> <button type="submit">提交</button> </form> </body> </html> <script> // 按鈕點選事件 $('#upload').on('submit',function (e) { // 關閉預設的提交改為ajax提交 e.preventDefault(); // 新建一個表單內容內容為原表單內容 var formData = new FormData(e.target); $.ajax( { type: 'POST',//型別為post提交方式 url: 'http://upload-z1.qiniup.com',//地址根據存取區域進行填寫 contentType: false, data: formData, processData: false,//不轉化為資訊 success: function (r) { console.log(r); //上傳成功則列印返回值 有key 和hash }, error: function (r) { console.log(r); } } ); }); </script>
最簡單粗暴的表單上傳，當然token還需要後臺獲取。下面看一下專案中的運用
php獲取token:
//獲取後臺上傳token public function getToken() { //上傳策略 $policyFields =[ 'mimeLimit'=>'image/jpeg;image/png', ]; $expires = 3600; $accessKey = Config::get('qiniu.accessKey');//獲取七牛AK $secretKey = Config::get('qiniu.secretKey');//獲取七牛SK $auth = new Auth($accessKey, $secretKey); $bucket = Config::get('qiniu.appimgbucket');//設定儲存空間 $token = $auth->uploadToken($bucket); //$token = $auth->uploadToken($bucket,null,$expires,$policyFields);//若需要限制上傳檔案型別，則在生成token時新增上傳策略即可 echo json_encode(getReturnData(200,'獲取token成功',$token)); }
注：需先引入七牛php SDK
如在thinkphp中進行引入 ：
vendor('php_sdk.autoload');
use Qiniu\Auth as Auth;接下來看下前端的html
<form id="addform"> <table class="table table-bg"> <tbody> <tr> <th width="140" class="text-r"><span class="c-red">*</span> 選擇圖片：</th> <td><input type="file" style="width:300px" id="imgaddr" name="imgaddr" ></td> </tr> <tr> <td class="text-c" colspan="2"><button class="btn btn-success radius" onclick="saveimg('儲存圖片地址','獲取token地址')"><i class="icon-ok"></i> 確定</button></td> </tr> </tbody> </table> </form>
後端的js
//第一步 獲取token
function saveimg(addurl,tokenurl) {
$.post(tokenurl,{d:'d'},function(result){
var token=result.data;
saveimgtoqiniu(addurl,token);
},'json');
}
//第二步 將圖片傳到七牛
function saveimgtoqiniu(addurl,token) {
var formData = new FormData();
formData.append("file", $('#imgaddr')[0].files[0]);
formData.append("token", token);
$.ajax(
{
type: 'POST',
url: 'http://up-z0.qiniup.com',
contentType: false,
data: formData,
processData: false,
async :false,//設定格式為同步非非同步 不然可能會報錯無法儲存到臨時變數/物件
dataType:'json',
success: function (r) {
console.log(r);
var imgurl='你的圖片地址'+r.key;//獲取到key值後拼接圖片地址
saveimgtoserver(addurl,imgurl);//第三步：將圖片地址傳到後臺伺服器即可
},
error: function (r) {
console.log(r);
}
});
}