先说一下大致思路,前端到后台获取七牛上传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);
}
});
}