前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何用Postman测试文件或图片上传

如何用Postman测试文件或图片上传

原创
作者头像
北桥苏
发布2024-05-30 10:03:02
1070
发布2024-05-30 10:03:02
举报
文章被收录于专栏:PHP开发PHP开发

虽然现在很多都是使用大平台的对象存储存放应用中的文件,但有时小项目还是可以使用以前的方式上传到和程序一起的服务器上,强调一下这里是小众需求,大众可以使用阿里云的OSS,腾讯的COS,七牛的巴拉巴拉xxxxxx……

Postman使用

1. 打开后,选择"body"->"form-data",key悬浮的时候选择“File”, 然后value会出现一个文件按钮。

2. 本地的上传方法测试一下打印一下。

3. 以上使用Postman测试文件上传接口就通了,下面就写一个异步上传的效果。

多文件异步上传

1. 前端

代码语言:javascript
复制
<!--图片上传-->
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span> 图片:</label>
                <div class="formControls col-xs-8 col-sm-3">
                    <input id="img" type="file" multiple="true" onchange="uploadImgs(this,event)"/>
                    <div id="img_box">
                        <foreach name="img_upload.img_arr" item="data">
                        <div class="img_item">
                            <img id="ImgPr" class="hid" src="{$data.url}"/>
                            <span class="del hid" onclick="closeImg(this)">X</span>
                        </div>
                        </foreach>
                    </div>

                    <input id="hid_img" type="hidden" name="img" value="{$img_upload['img_str']}"/>
                </div>
            </div>
            <!--图片上传-->



// 多图片上传触发事件
        function uploadImgs(_this,event) {
            // 实例FormData
            var data = new FormData();
            for (var i = 0; i < event.target.files.length; i++) {
                var files = event.target.files[i];
                // 批量添加文件
                data.append('file[]', files);
            }
            // 异步提交
            ajaxUpload(data);
        }

        function ajaxUpload(data) {

            $.ajax({
                url: '{$ajax_upload_url}',
                type: "POST",
                data: data,
                dataType: 'json',
                processData: false,// *重要,确认为false
                contentType: false,
                // beforeSend: function () {
                //     console.log(11111);
                // },
                success: function (res) {
                    if(res.error == 1) {
                        alert(res.msg);
                        return;
                    }else {
                        console.log(res);
                        var imgArr = $("#hid_img").val();
                        $.each(res.data,function(index,data) {
                            // 追加显示
                            $("#img_box").append(
                                '<div class="img_item">'+
                                    '<img id="ImgPr" class="hid" src="'+data.path+'"/>'+
                                    '<span class="del hid" onclick="closeImg(this)">X</span>'+
                                '</div>'
                            );
                            if(!imgArr) {
                                imgArr = data.path;
                            }else {
                                imgArr += ","+data.path;
                            }

                            // 追加提交数据
                            //$(".formControls").append('<input id="hid_img" type="hidden" name="img[]" value="'+data.path+'"/>');
                        })
                        $("#hid_img").val(imgArr);
                    }
                },
                error: function (res) {
                    alert('异步上传图片接口出错');
                    return;
                }
            });
        }

2. PHP部分就是和同步方式一样。

代码语言:javascript
复制
 /*
     * 图片上传
     * */
    public function ajaxUpload() {
        $upload = new \Think\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小 3145728
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
        $upload->savePath  =     'repair/'; // 设置附件上传(子)目录
        // 上传文件
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $this->ajaxReturn(array("error"=>1,"msg"=>$upload->getError(),"data"=>array()));
        }else{// 上传成功
            $uploadFile = array();
            foreach($info as $key=>$value) {
                $uploadFile[] = array(
                    "path" => ltrim($upload->rootPath,'.').$value['savepath'].$value['savename'],
                    "ext" => $value['ext'],
                );
            }

            $this->ajaxReturn(array("error"=>0,"msg"=>"上传成功","data"=>$uploadFile));
        }
    }

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Postman使用
  • 多文件异步上传
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档