ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

tp5多文件异步上传+七牛云+预览图

2021-11-23 12:03:10  阅读:166  来源: 互联网

标签:七牛云 name val 预览 image img jpeg tp5 上传


html 前端页面

<form enctype="multipart/form-data" id="form">
 <input type="file" name="file" id="file" multiple="multiple"><br><br>
 <input type="button" value="提交">
</form>
<div class="picDis" style="display:none;">

</div>
</body>
</html>

JS代码

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    $('#file').change(function(){
        var formData = new FormData($('form')[0]);
        for(var i = 0;i < ($(this)[0].files).length;i++)
        {
            formData.append('file[]',$(this)[0].files[i]);
        }
        $.ajax({
            url:'/test/test/img',
            type:'POST',
            data:formData,
            contentType: false,
            processData: false,
            success:function(res)
            {
                console.log(res);
                return false;
                if(res.code == 200)
                {
                    var str = '';
                    $('.picDis').css('display','block');
                    $.each(res.data,function(k,v){
                        str += "<a href='"+v+"'><img src='"+v+"' height='200px' width='150px'></a>";
                    })
                    $('.picDis').html(str);
                }
            }
        })
    })
</script>

php代码

public function img(Request $request)
{
    //接收文件上传的值
    $file = $_FILES['file'];
    /*
     {
        name: ['1.jpg', '2.jpg'],
        type: ['image/jpeg', 'image/jpeg'],
        tmp_name: ['C:\\....', 'C:\\.....'],
        error: [0, 0],
        size: [291730, 259200]
     }
     */

    //用来处理文件上传值的数组
    $arr = [];

    foreach($file as $key=>$val)
    {
        foreach($val as $k=>$v)
        {
            $arr[$k][] = $v;
        }
    }

    /*
    0   :  ["1.jpg", "image/jpeg", "C:\\...", 0, 291730]
    1   :  ["2.jpg", "image/jpeg", "C:\\...", 0, 259200]
    */
    //之后用来当做键名的数组
    $keys = ['name','type','tmp_name','error','size'];

    //$keys=>$arr 键值对数组
    $data = [];

    foreach($arr as $val)
    {
        $data[] = array_combine($keys,$val);
    }
    /*
    0: {name: "1.jpg", type: "image/jpeg", tmp_name: "C:\\...", error: 0, size: 291730}
    1: {name: "2.jpg", type: "image/jpeg", tmp_name: "C:\\...", error: 0, size: 259200}
    */

    //入库数组
    $img = [];

    //返回前端的文件链接数组
    $image = [];

    //上传七牛云业务逻辑
    $accessKey = ''; //去控制台的秘钥管理拿AK
    $secretKey = '';//去控制台的秘钥管理拿SK
    //七牛云桶名,根据自己实际进行填写
    $bucket = '...';
    $auth = new Auth($accessKey, $secretKey);
    // 生成上传Token
    $token = $auth->uploadToken($bucket);
    // 构建 UploadManager 对象
    $uploadMgr = new UploadManager();

    foreach($data as $val)
    {
        //本地的文件路径
        $localFilePath = $val['tmp_name'];

        //截取文件后缀名
        $suffix = strtolower(substr($val['name'],strpos($val['name'],'.')));

        //生成一个唯一的文件名称,重命名 (md5加密原文件名+秒+随机数)
        $fileName = md5($val['name']) . date('s',time()) . rand(1,9999999);
        $fileName .= $suffix;

        $image[] = '....../'.$fileName;

        // 调用 UploadManager 的 putFile 方法进行文件的上传。
        list($ret, $err[]) = $uploadMgr->putFile($token, $fileName, $localFilePath);

        $img[] = ['img'=>'....../'.$fileName];
    }
    //判断文件上传七牛云是否出错
    foreach($err as $val)
    {
        if($val != null)
        {
        return returnJson(500,'文件上传失败',[]);
        }
    }
    $db = new Img();
    $result = $db->saveAll($img);
    if($result)
    {
        return returnJson(200,'文件上传成功',$image);
    }
    else
    {
        return returnJson(403,'文件上传失败',[]);
    }

标签:七牛云,name,val,预览,image,img,jpeg,tp5,上传
来源: https://blog.csdn.net/J2778322217/article/details/121490100

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有