其他分享
首页 > 其他分享> > tp5多文件异步上传+七牛云+预览图

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