问题:
在这里插入图片描述
今天拿到接口文档,有一个上传图片的接口,看文档其中参数名是“file”以及示例是一串本地的URL。顿时有点懵,不知道怎么拿到这个参数。

思路:
与后端交流过那个示例值其实并不是URL。其实它是个对象,而这个对象表示照片的信息内容以及地址。这涉及到input标签的属性“file”以及formdata一种传参形式。

一、formdata类型

现代 Web 应用程序中经常需要对表单数据进行序列化,因此 XMLHttpRequest Level 2 新增了FormData 类型。FormData 类型便于表单序列化,也便于创建与表单类似格式的数据然后通过 XHR发送。

let data = new FormData(); 
data.append("name", "Nicholas"); 

二、代码

    $(".input-file").change(function(e) {
        var file = e.target.files[0]
        console.log(file)
        var fd = new FormData()
        fd.append('file', file)
        ajax(fd)
    })
function ajax(data) {
    $.ajax({
        url: "http://1.12.218.211:2001/helmet/detect",
        dataType: "json",
        async: false,
        processData: false,
        contentType: false,
        data: data,
        method: "POST",
        success(res) {
            console.log(res)
            if (res.code == 20000) {
                $("#leftimage").attr("src", res.data['source:'])
                $("#rightimage").attr("src", res.data.output)
            } else {
                alert(res.code)
            }
        },
        error(err) {
            console.log(err)
        }
    })
}
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐