微信小程序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>

到此这篇关于微信小程序uploadFile接口实现文件上传的文章就介绍到这了,更多相关小程序uploadFile内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 wx.uploadFile无法上传解决办法

    微信小程序 wx.uploadFile无法上传解决办法 微信安卓客户端无法使用wx.uploadFile上传文件的问题有不少开发者都遇到. 我也因为一直不能解决,硬着头皮提交审核最后被拒(抱着审核者最好用iOS检测的心态,不巧审核我应用的用的是安卓),才尝试使用第三方的手段解决. 最终我是用了七牛第三方存储的方式,将文件直接上传至七牛的储存的空间上再回调使用. 当然像又拍云,万象优图这些第三方存储源都可以采用这种思路. 首先是将七牛的https上传域名放进小程序的域名名单中. 这里我使用的是七牛

  • 微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决

    微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决 微信小程序上传图片的时候,如果是多图片上传,一般都是直接用一个循环进行wx.uploadFile 这个在电脑上面测试与苹果手机上面都不会有什么问题 但当用安卓测试的时候,你会发现小程序会提示一个the same task is working wx.uploadFile不能并行,因为wx.uploadFile是一个异步函数,所以循环的时候在安卓手机上会出现并行 解决的方法 做一个上传完的

  • 微信小程序wx.uploadfile 本地文件转base64的实现代码

    微信小程序wx.uploadfile, 利用PHP接口把本地图片转化为base64位. 网上到处都是粘贴复制的wx.uploadfile的解决方案, 但目前还没有具体的代码: 特意呈现出来给需要的伙伴们: 代码: case 'imgBufferToBase64': <span style="white-space: pre;"> </span>$data=''; <span style="white-space: pre;"> &

  • 详解微信小程序 wx.uploadFile 的编码坑

    编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息.然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间. 这里分享一个和编码有关的坑,主要是由于真机预览时 formData 中的非字母.数字的 ASCII 编码的字符如中文.泰文传输到服务端将不会自动进行转码码,并会会产生乱码及溢出,从而导致错误. 微信的 uploadFile 类似与 html 中的form带文件上传的表单 ( enctype="multipart/form-data&quo

  • 微信小程序uploadFile接口实现文件上传

    目录 写在前面 创建前端页面 写入js事件-完成上传操作 配置后端php接口文件 实现上传功能 完善上传功能 写在前面 上节中我们讲到小程序的request请求,掌握了基本的网络请求方式,这节我们通过小程序的uploadFile接口能力完成对小程序上传操作(uni.uploadFile,后端php接口),通过这一节你可以学习到php的上传接口的写法,以及如何配合前端完成一个小程序上传操作 创建前端页面 我们默认使用创建新项目进行讲解,在index.vue最上方写入代码 <template> &

  • 微信小程序学习笔记之文件上传、下载操作图文详解

    本文实例讲述了微信小程序学习笔记之文件上传.下载操作.分享给大家供大家参考,具体如下: 前面介绍了微信小程序登录API与获取用户信息操作.这里再来介绍一下文件的上传与下载操作. [文件上传]wx.uploadFile (以上传图片为例) 后台上传接口Upload.php:(tp5) <?php namespace app\home\controller; use think\Controller; class Upload extends First { //上传图片API public fun

  • 微信小程序环境下将文件上传到OSS的方法步骤

    步骤 1: 配置 Bucket 跨域 客户端进行表单直传到 OSS 时,会从浏览器向 OSS 发送带有 Origin 的请求消息.OSS 对带有 Origin 头的请求消息会进行跨域规则(CORS)的验证.因此需要为 Bucket 设置跨域规则以支持 Post 方法. 步骤 2:配置外网域名到小程序的上传域名白名单中 通过 OSS 控制台查看外网域名. 登录微信小程序平台,配置小程序的上传域名白名单. 步骤 3:使用 Web 端直传实践方案 Demo 进行上传测试 下载应用服务器代码 修改 De

  • 微信小程序录音实现功能并上传(使用node解析接收)

    背景 我在开发小程序的时候,有需求要实现录音功能,并能上传给服务器.小程序录音功能我是使用的微信的wx.getRecorderManager()实现的,通过该方法创建实例,实例录音得到的文件是本地临时文件,上传文件需要使用微信的wx.uploadFile(Object object)方法,这就是本次项目的背景. 小程序端 html页面主要是第一个按钮,两个事件,长按开始录音,松手停止录音.第二个按钮只是一个播放录音的功能,用于确定录音是否成功 <!--pages/record/record.wx

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序云开发获取文件夹下所有文件(推荐)

    上周一个高中同学让我帮他做个图片展示的公众号,因为一直在加班的原因,所以一时忘了,昨晚想起来就赶紧加班加点的帮他弄了下,遇到了个问题,记录一下. 他的需求是要有个后台给他上传图片并且将图片归类,前端公众号根据每次不同的主题显示不同的封面和照片,但是服务器又不想买贵的,思来想去,最后决定用小程序云开发,连服务器和公众号认证费都免了,哈哈哈哈 因为改成小程序云开发,所以需求也有了些变动,最后改成不需要后台,图片直接在云开发控制台中上传,然后在小程序中添加一个专门用来对封面和名称做修改的管理员页面,其

  • 微信小程序 request接口的封装实例代码

    微信小程序 request接口的封装实例代码 小程序request接口的封装(本质上是对request回调函数再次回调) module.exports.getData = function (url) { var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; var method = arguments.length > 2 && arguments[

  • mpvue微信小程序的接口请求fly全局拦截代码实例

    这篇文章主要介绍了mpvue微信小程序的接口请求fly全局拦截代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 业务要求: 需要进入页面时就要游客登陆拿到token: 之后的接口都是需要这个token: 其他操作则需要授权登陆,此时的token已失效: token过久之后会过期: 业务实现: 1.全局拦截 fly.interceptors.request.use(request => { const token = storage.get

  • 微信小程序 检查接口状态实例详解

    微信小程序 检查接口状态实例详解 实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()

  • 微信小程序 下拉刷新及上拉加载原理解析

    这篇文章主要介绍了微信小程序 下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉刷新是移动端更新列表数据的交互行为,用户通过手指在屏幕上子上而下的滑动,可以触发页面的下拉刷新,更新列表数据. 应用场景: 在移动端,数据列表是常见的页面效果,更新列表数据是最基本的页面需求,相比于按钮刷新,定时刷新来说,下拉刷新的用户体验方便友好,已经成为移动端刷新列表数据的最佳解决方案. 微信小

随机推荐