关于调用第三方接口上传图片携带参数，从h5布局css样式到前端ajax到控制层到工具类一条龙！

最新推荐文章于 2023-05-09 21:39:49 发布

键来！

最新推荐文章于 2023-05-09 21:39:49 发布

阅读量929

点赞数 8

CC 4.0 BY-SA版权

分类专栏： httpclient 文章标签：第三方接口 java工具类 formdata上传图片携带参数控制层接收ajax 图片上传路径问题

本文链接：https://blog.csdn.net/qq_41681381/article/details/100581177

httpclient 专栏收录该内容

1 篇文章

订阅专栏

本文分享了使用第三方接口上传图片时遇到的问题及解决方案，详细介绍了前端布局、JS处理图片显示、FormData打包数据、控制层处理及工具类实现等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说到第三方接口，真是让人又爱又恨，用的顺利很方便，提交参数就能解决问题，用的不顺利的时候，让人头皮发麻。不久前用了第三方的接口上传图片，遇到了不少问题，不过通过查阅资料，终于解决了，在此做点分享。
先看看第三方接口文档、
在这里插入图片描述

一：前端：
h5布局和css样式

稍微会一点布局样式的，这都不难，但是要实现点击加号即可把本地图片显示在背景框里，，我用的是这种布局

<label for="file0">
                <div class="uploadLocal faceSearch-box-body-images-box-uploadlocal" id="headImg2">
                    <img src="" class="faceSearch-box-body-images-box-uploadlocal-image"
                         style="width: 100%;height: 100%;display: none">
                    <input type="file" name="file" accept="image/*" id="file0" class="uploadLocal-input">
                    <i class="el-icon-plus">+</i>
                </div>
            </label>

隐藏img标签，令input标签居左9999999px（我后来觉得隐藏起来更好），i标签relative定位，注意label标签for=“file0”，这是input的id，其他的细节调一调就可以了，很简单的。

js
首先是点击显示图片
部分代码参考网上大佬的

//选择图片
$(document).on('change', '.uploadLocal-input', function () {
    var t = checkFile();
    $('.faceSearch-box-body-images-box-uploadlocal-image').attr('src', getObjectURL(t));
    $(this).next().css('display', 'none');
    $(this).prev().css('display', 'inline-block');
})

//检测是否选择文件，如果选择，返回文件对象;如果没选择，返回false
function checkFile() {
    // 获取文件对象(该对象的类型是[object FileList]，其下有个length属性)
    var fileList = $('.uploadLocal-input')[0].files;
    // 如果文件对象的length属性为0，就是没文件
    if (fileList.length === 0) {
        console.log('没选择文件');
        return false;
    }
    return fileList[0];
};

//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}

然后是重点，ajax传递

//入库
function nnew() {
    //确定新增
    $(document).one('click', '#addTargetLibraryDialog_btn_2', function () {
        var person_name = $('.el-form.info').eq(1).find('input').eq(0).val();
        var person_age = $('.el-form.info').eq(1).find('input').eq(1).val();
        if ($('.el-form.info').eq(1).find('input').eq(2).val() == '男') {
            var person_gender = '1';
        }
        if ($('.el-form.info').eq(1).find('input').eq(2).val() == '女') {
            var person_gender = '0';
        }
        var person_idcard = $('.el-form.info').eq(1).find('input').eq(3).val();
        var person_addr = $('.el-form.info').eq(1).find('input').eq(4).val();
        var formData = new FormData();                 // 生成FormData对象
        var upload_file = $(".uploadLocal-input")[0].files[0];
        formData.append("img", upload_file);//此处是图片
        formData.append("url", "http://"+url+"/api/form");
        formData.append("msg_id", "1029");
        formData.append("person_name", person_name);
        formData.append("person_age", person_age);
        formData.append("person_gender", person_gender);
        formData.append("person_idcard", person_idcard);
        formData.append("person_addr", person_addr);
        formData.append("lib_id", lib_id);
        $.ajax({
            url:  "/aibasic/targetBaseManagement/form",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (res) {
                window.location.reload();
            }
        });
        $('.el-dialog').eq(2).css('display', 'none');
    })
    //取消新增
    $(document).one('click', '#addTargetLibraryDialog_btn_1', function () {
        $('.el-dialog').eq(2).css('display', 'none');
    })
}

重点看这个ajax，用的是FormData打包数据，什么图片，乱七八槽的参数都都打包到一起给控制层解决（先把数据传过去再做细节处理），js没什么好说的，注意参数 contentType: false, processData: false,cache: false,要写上。

控制层

@Controller
@RequestMapping("/aibasic/targetBaseManagement")
public class TargetBaseManagementController {
 @ResponseBody
    @RequestMapping(value="/form", method=RequestMethod.POST)
    public String form(HttpServletRequest request, HttpServletRequest response, HttpSession session)  throws IOException{
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("img");//file是form-data中二进制字段对应的name
        Map<String, String[]> params=request.getParameterMap();
        String url=params.get("url")[0];
        //复制一个图片在当前项目文件夹下
        File f = null;
        if(file.equals("")||file.getSize()<=0){
            file = null;
        }else{
            InputStream ins = file.getInputStream();
            f=new File(file.getOriginalFilename());
            FileUtil.inputStreamToFile(ins, f);
        }
        String res  = HttpClientUtil.form(url, f, params);
        //删除图片
        File del = new File(f.toURI());
        del.delete();
         return res;
    }
}

用HttpServletRequest 接收FormData参数，之后转为MultipartHttpServletRequest 类型，在用MultipartFile 取出图片，其他参数用 Map<String, String[]>接收，第三方接口的url单独拿出来：String url=params.get(“url”)[0];
这后面的一波先复制再删除虽然看起来很愚蠢，但是能够获取到复制品的绝对路径（其实这里完全可以直接传一个file.getInputStream()给工具类HttpClientUtil.form，因为MultipartEntityBuilder可以接受InputStream参数，但是获取到绝对路径就很有用处，比如java用cmd命令行形式传图片就需要绝对路径,而且这里就可以传File类型参数）

工具类

public class HttpClientUtil {
public static String form(String url, File name, Map<String, String[]> params){
            ContentType contentType = ContentType.create("text/plain",Charset.forName("UTF-8"));//解决乱码
            CloseableHttpClient httpclient = HttpClients.createDefault();
            CloseableHttpResponse response = null;
            String resultString = "";
            try {
                HttpPost httppost = new HttpPost(url);
                MultipartEntityBuilder bulid = MultipartEntityBuilder.create();
                bulid.addBinaryBody("img", name);
                for(String key:params.keySet()){
                    if(key.equals("url")||key.equals("img")){

                    }
                    else if(key.equals("person_name")){
                        bulid.addTextBody(key,params.get(key)[0],contentType);//中文参数
                    }
                    else{
                        bulid.addTextBody(key,params.get(key)[0]);
                    }
                }
                HttpEntity reqEntity=bulid.build();
                httppost.setEntity(reqEntity);
            response = httpclient.execute(httppost);
            resultString = EntityUtils.toString(response.getEntity(), "UTF-8");
            try {
                System.out.println("----------------------------------------");
                HttpEntity resEntity = response.getEntity();
                if (resEntity != null) {
                    System.out.println("Response content length: " + resEntity.getContentLength());
                }
                EntityUtils.consume(resEntity);
            } finally {
                response.close();
            }
        } catch (ClientProtocolException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                httpclient.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return resultString;
    }
    }

上传图片通常采用流的形式，这里用
MultipartEntityBuilder bulid = MultipartEntityBuilder.create();
bulid.addBinaryBody(“img”, name);
其他参数
bulid.addTextBody(key,params.get(key)[0]);
httpclient工具类就这几句话，发送接收都是写死的，就是参数的处理是大问题

好了，鄙人短见，就写这么多，有什么问题、建议、疑问，欢迎评论