在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：https://www.jianshu.com/p/383e1f2f4276，那如果是在jQuery里面，图片上传要怎么写？今天记录一个jQuery+ajax实现简单的上传图片功能。

思路很简单，和上面的差不多，前端以post的形式传递二进制图片文件给到后端，后端接收成功之后，同样返回一个字符串类型的url图片路径。

发送请求之后，可以在network里面看到具体的请求以及参数。 这里了可以看到Form data的文件格式，二进制binary文件

在看一眼返回值： 额，这里我们的后端比较省事，简单粗暴的，直接的，赤裸裸的给了个字符串，嗯，，也行吧。

效果是这个样子的（我这里没有给默认的图片，可以添加一下默认的图片~） 在点击选择文件按钮的时候，会打开本地的文件夹选择一张图片，点击打开的时候，会触发onchange绑定的函数，发起请求。接收到返回值之后，再讲返回值渲染到页面上。

注意：

如果接口存在问题的话，要用postman测试一下 postman测试上传图片接口步骤如下:

1：新建一个窗口 将接口地址和请求方式填写一下

2:选择Body，选择form-data，选择File

3:在KEY里面填写一下，file，不填写会出错，然后VALUE会出现选择本地图片的选项。

4：选择完本地图片之后，点击send发送 一般到这步就能看到返回值了