【uniapp小程序】uploadFile文件上传
目录
- 写在前面
- 创建前端页面
- 写入js事件（完成上传操作）
- 配置后端php接口文件
- 实现上传功能
- 完善上传功能
- 最后
写在前面
上节中我们讲到小程序的request请求，掌握了基本的网络请求方式，这节我们通过小程序的uploadFile接口能力完成对小程序上传操作（uni.uploadFile，后端php接口），通过这一节你可以学习到php的上传接口的写法，以及如何配合前端完成一个小程序上传操作
创建前端页面
我们默认使用创建新项目进行讲解，在index.vue最上方写入代码
<template><view style="width: 750rpx;height: 200rpx;display: flex;flex-direction: column;">上传的文件名：<button type="primary" style="width: 500rpx;" @click="upload()">点击上传</button></view>
</template>
通过前端点击“点击上传”来调用对应的方法
创建后运行如下
这里插一嘴，由于博主是全栈开发的，我给大家总结一下这部分与微信开发者工具 语法的区别
①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进行开发
<?php
// 上传图片
function uploadimg() { $file = $_FILES['file'];if ($file) { //var_dump($file);// 获取文件后缀名$ext = pathinfo($file['name'], PATHINFO_EXTENSION);$target = 'upload/' . uniqid() . '.' . $ext;// 转移图片地址if (!move_uploaded_file($file['tmp_name'], $target)) {$GLOBALS['error_message'] = '上传图片失败';echo error_message;}die(json_encode(array('errCode' => 0,'error_message'=>'图片上传成功','file'=>$target),480)
);}
}uploadimg();完成后整个目录是这样的（层级关系）
实现上传功能
接下来 我们将刚刚的上传接口uni.uploadFile与文件选择接口uni.chooseImage合并一下完成整个流程，也就是选择文件完成后，将选择的文件上传
我们在upload方法中写入
let that=this;console.log("我被点击了");uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;console.log(tempFilePaths);uni.uploadFile({url: 'https://你的接口地址/tp_imgsrc.php', //仅为示例，非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {},success: (uploadFileRes) => {console.log(uploadFileRes.data);}});}});
测试运行看看
返回了文件名和我自己定义的返回码
可以看到服务器上也是存在这个文件的
完善上传功能
最重要的步骤我们已经做完了，那上传成功是不是得告诉下上传的用户告诉他们上传成功了？
于是我们需要做一下判断，当errCode==0的时候高速用户上传成功
但是发现了个问题，php返回的是数组，为啥到uniapp返回的是字符串？
指导我看了下官方的文档
返回的是字符类型
解决办法：
let param_json = JSON.stringify(this.$data)//转为字符串let bookkeeping_data = JSON.parse(bookkeeping_data_string)//转换为JSON测试后完美解决
改动到的代码
let json_data = JSON.parse(uploadFileRes.data)
console.log(json_data['errCode']);
接下来就可以将信息告诉用户是否上传成功了
uni.showToast示例
uni.showToast({title: '标题',icon:'none'duration: 2000
});相应的代码：
let json_data = JSON.parse(uploadFileRes.data)console.log(json_data['errCode']);if (json_data['errCode']==0) {uni.showToast({title: json_data['error_message'],icon:'none',duration: 2000});} else{}
测试截图
完整的index.vue
<template><view style="width: 750rpx;height: 200rpx;display: flex;flex-direction: column;">上传的文件名：<button type="primary" style="width: 500rpx;" @click="upload">点击上传</button></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {let that=this;uni.request({url: 'https://api.uomg.com/api/qq.info', //仅为示例，并非真实接口地址。data: {qq: '504113939'},header: {'Content-Type': 'application/json;charset=UTF-8' //自定义请求头信息},success: (res) => {console.log(res.data);}});},methods: {upload(){let that=this;console.log("我被点击了");uni.chooseImage({success: (chooseImageRes) => {const tempFilePaths = chooseImageRes.tempFilePaths;console.log(tempFilePaths);uni.uploadFile({url: 'https:/你的接口/tp_imgsrc.php', //仅为示例，非真实的接口地址filePath: tempFilePaths[0],name: 'file',formData: {},success: (uploadFileRes) => {let json_data = JSON.parse(uploadFileRes.data)console.log(json_data['errCode']);if (json_data['errCode']==0) {uni.showToast({title: json_data['error_message'],icon:'none',duration: 2000});} else{}}});}});},}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin-top: 200rpx;margin-left: auto;margin-right: auto;margin-bottom: 50rpx;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}
</style>最后
❤️❤️❤️❤️❤️❤️
【uniapp小程序】uploadFile文件上传相关推荐
- uni-app 小程序多图上传
uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...
- 微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html <!--pages/demo4/demo4.wxml--> <view class="cont ...
- Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示 背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
- 微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
- 微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
- 微信小程序 多文件上传方法
最近工作项目主要是微信小程序,这篇主要介绍接到的一个需求--多图片上传. 知道需求后马上查了下小程序的api,发现wx.uploadFile并不支持多文件上传,这样就得循环上传,肯定影响速度,后来发现 ...
- 微信小程序多文件上传（docx，ppt，pdf，zip，jpg···）
这遍文章主要介绍下,在小程序的开发过程中实现多个文件上传的实现方法. chooseMessageFile 使用这一种方式进行多文件的上传时,就是说从客户端会话选择文件,下面是chooseMessage ...
- uniapp 微信小程序开发 图片上传压缩
uniapp 微信小程序开发 图片上传压缩 安卓上传图片并压缩 思路 全部代码 安卓上传图片并压缩 由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
- php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...
最新文章
- rethat安装MySQL多例_Spring框架-Bean作用域中单例模式和多例模式的区别
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
- pandas把多个列相加求和、输出字母a-z
- 今日收到的智商税：远红外
- C和C++数据结构算法
- Java反射课程教程
- Apache Camel 2.19发布–新增功能
- mysql5.7乱码_mysql5.7中解决中文乱码的问题
- 再谈 Linux下的nanosleep函数
- jetbrains IDEA/pycharm修改代码提示框配色
- sqlite 迁移 oracle,Oracle 数据导入 Sqlite
- hello!!大家好
- 屏蔽系统的故障定位案例
- C++实验3个人所得税计算器
- glsl中uniform,attribute和varying详解
- nRF 扫描条件过滤做法
- 代码审计工具简单汇总
- k8s（kubernetes）部署nacos（3各节点....N各节点均可以）集群
- JAVA第二次作业《胖瘦程度计算》
- Gunicorn配置详解
热门文章