【uniapp小程序】uploadFile文件上传

写在前面

上节中我们讲到小程序的request请求，掌握了基本的网络请求方式，这节我们通过小程序的uploadFile接口能力完成对小程序上传操作（uni.uploadFile，后端php接口），通过这一节你可以学习到php的上传接口的写法，以及如何配合前端完成一个小程序上传操作

创建前端页面

我们默认使用创建新项目进行讲解，在index.vue最上方写入代码

上传的文件名：点击上传

通过前端点击“点击上传”来调用对应的方法

创建后运行如下在这里插入图片描述这里插一嘴，由于博主是全栈开发的，我给大家总结一下这部分与微信开发者工具语法的区别①uniapp必须用template标签嵌套否则

②小程序点击事件用bindtap 而uniapp用@click 在这里插入图片描述

③uniapp的方法需要放在methods: {}里面在这里插入图片描述

写入js事件（完成上传操作）

接下来我们在刚刚创建测试的方法upload中进行修改，首先整个动作原理是：通过点击按钮触发upload方法=》选择文件获取到本地的路径=》上传给服务器=》服务器返回上传的文件名（上传后随机生成的）在这里插入图片描述了解到整个流程后我们先将文件进行选择uni.chooseImage示例

uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;console.log(tempFilePaths);}});

将代码放在unload中运行测试在这里插入图片描述可以看到已经生成了临时的文件

接下来我们通过uni.uploadFile方法完成对文件的上传

uni.uploadFile示例

uni.uploadFile({url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {'user': 'test'},success: (uploadFileRes) => {console.log(uploadFileRes.data);}});配置后端php接口文件

在写事件前，我通过在服务器上新建一个php文件作为文件上传的接口

新建tp_imgsrc.php考虑到大多数初学者这里决定用原生php进行开发

云奕文章网

【uniapp小程序】uploadFile文件上传

相关推荐：