欢迎您访问我的笔记本站旨在于记录一些平时工作中遇到的一些问题和解决方法,方便查阅,部分内容来源于网络,如有侵权请联系我删除
  • 微信微信
您现在的位置是:首页 > PHP后端

七牛云表单直传【原创】

日期:2024-06-12 14:07:40 作者:tty 来源:我的笔记 浏览:1215 次
表单上传适用于文件内容可以在一次 HTTP 请求即可传递完成的场景。该功能非常适合在浏览器中使用 HTML 表单上传资源,或者在不需要处理复杂情况的客户端开发中使用。

表单直传有一点需要注意,先看官方文档

关键参数表格里面的名称并不是请求时的参数名称,比如这里的upload_token,请求时要以上面的form表单的名称为准,传token而不是upload_token,这里以阿里云表单直传示例稍作修改

前端代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件到OSS</title>
</head>
<body>
<div class="container">
    <form>
        <div class="mb-3">
            <label for="file" class="form-label">选择文件</label>
            <input type="file" class="form-control" id="file" name="file" required>
        </div>
        <button type="submit" class="btn btn-primary">上传</button>
    </form>
</div>
<script src="/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    const form = document.querySelector('form');
    const fileInput = document.querySelector('#file');
    form.addEventListener('submit', (event) => {
        event.preventDefault();
        let file = fileInput.files[0];
        let filename = fileInput.files[0].name;//文件名,如:aa.jpg
        $.get('/index',{filename:filename},function (data){
             const formData = new FormData();
             formData.append('key', filename);//这个key不是必传。如果需要自定义文件名可以借助后台接口实现
             formData.append('token', data.token);
             formData.append('file', file);
             fetch('https://up-z0.qiniup.com', { method: 'POST', body: formData},).then((res) => {
                 console.log(res);
                 alert('文件已上传');
             });
        })

    });
</script>
</body>
</html>

后端代码

public function index()
{
    if($this->request->isAjax()){
        $auth = new Auth('you accessKey', 'you secretKey');
        $filename = $this->request->param('filename');//这里直接接收文件名,可以自己稍作处理变成自己想要的文件名称
        $token = $auth->uploadToken('demo',$filename);//这里filename不是必须,需要自定义文件名的话可以传这个
        return json([
            'token' => $token,
            'filename' => $filename
        ]);
    }
    return view();
}

上一篇: 没有更多了

下一篇: 钉钉机器人消息加签方式【原创】

提交评论
评论列表