前端上传图片到七牛云

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

前端上传图片到七牛云

猜你喜欢