上传文件:wx.uploadFile

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

wx.uploadFile 这个接口可以把文件上传到后端服务 .. 在这个选择图像接口的成功回调里面,我们可以试一下 wx.uploadFile ,去把选择的图像文件上传到后端服务 ...

先用一下 response.tempFilePaths 的 map 方法,这个 tempFilePaths 是一组图像文件的路径 .. 使用数组的 map 方法,处理一下每个文件路径 .. 给它一个函数 .. 参数的名字可以是 filePath ..

主体里面用一下 wx.uploadFile .. 给这个接口一个对象,去配置一下它 .. 先添加一个 url 属性,它的值就是我们的后端服务用来处理文件上传的接口 .. 我的接口地址是 sandbox.ninghao.net/api/uploads

再添加一个 filePath 属性,设置一下要上传的文件的路径 .. 这里可以使用 filePath 来表示 .. 然后是 name,设置一下元素的名字 .. 我们的处理上传文件的后端服务接口期待这个名字是 uploads ...

这里就是在 upload,array 方法里面设置的这个 uploads ...

然后添加一个 success 回调 ... 一个参数是 response,我们把它输出到控制台上检查一下 ..

测试

先把之前上传到后端服务的文件还有数据库删除掉 ..

回到微信开发者工具 .. 选择几个图像文件 ... 稍等一下 .. 控制台会输出几个对象 .. statusCode 是 200,说明后端服务已经成功的处理了上传文件的请求 ..

不过这里还有两个 502 的状态 .. 意思是我们的后端服务有点问题 .. 这个是因为我们的后端服务用了 nodemon 监视了应用的变化,默认只要应用里的文件有变化,它都会重新启动服务 .. 所以会导致这里我们看到的这个 502 的错误 ..

找到 uploads 目录 .. 删掉里面所有的东西 ..

打开后端应用 .. 新建一个 nodemon.json ,它是 nodemon 的配置文件 .. 这里添加一个 ignore .. 设置一下要忽略掉的东西 .. 添加一个 uploads/* ..

再打开 .gitignore .. 项目的 uploads 目录下面的东西不应该放在版本控制里,所以在这里忽略掉 uploads 目录下面的所有的东西 ..

再去关掉服务 .. 然后重新再启动一下 ..

回到开发者工具 .. 选择几张图片 ... 这次会成功的把所有选择的图像文件上传到我们的后端服务 ... 你可以看到返回的状态码都是 200 ... 找到 uploads 目录,可以预览一下上传上来的这些图片文件 ..

上传文件:wx.uploadFile《 微信小程序:接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点