广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序uploadFile接口实现文件上传
  • 940
分享到

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

2024-04-02 19:04:59 940人浏览 薄情痞子
摘要

目录写在前面创建前端页面写入js事件-完成上传操作配置后端PHP接口文件实现上传功能完善上传功能写在前面 上节中我们讲到小程序的request请求,掌握了基本的网络请求方式,这节我们

写在前面

上节中我们讲到小程序的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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序uploadFile接口实现文件上传

本文链接: https://www.lsjlt.com/news/165815.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序uploadFile接口实现文件上传
    目录写在前面创建前端页面写入js事件-完成上传操作配置后端php接口文件实现上传功能完善上传功能写在前面 上节中我们讲到小程序的request请求,掌握了基本的网络请求方式,这节我们...
    99+
    2022-11-13
  • 【uniapp小程序】uploadFile文件上传
    目录 写在前面创建前端页面写入js事件(完成上传操作)配置后端php接口文件实现上传功能完善上传功能 最后 写在前面 上节中我们讲到小程序的request请求,掌握了基本的网络请...
    99+
    2023-09-02
    uni-app 小程序 php 微信小程序
  • 微信小程序接口请求多文件+参数上传、单文件+参数上传(formData形式) 微信小程序实现formData格式传参(亲测有效)
    01.引入所需formData js文件 1.文件链接 链接: https://pan.baidu.com/s/1BDxx0-1KMAnkceXb45L5rg 提取码: 6ibp 2.引入使用 const FormData = requir...
    99+
    2023-08-17
    微信小程序 小程序 小程序formData格式传参
  • 使用微信小程序实现文件上传功能
    标题:使用微信小程序实现文件上传功能随着微信小程序的兴起,越来越多的企业和开发者开始利用微信小程序为用户提供便捷的服务。在很多情况下,用户需要上传文件。如果能够在微信小程序中实现文件上传功能,将会极大地提升用户体验。本文将介绍如何使用微信小...
    99+
    2023-11-21
    功能 文件上传 微信小程序
  • 微信小程序怎么实现ES6批量上传文件
    这篇文章主要讲解了“微信小程序怎么实现ES6批量上传文件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序怎么实现ES6批量上传文件”吧!微信小程序 ES6Promise.all批量上...
    99+
    2023-06-17
  • 微信小程序如何实现ES6Promise.all批量上传文件
    这篇文章主要介绍微信小程序如何实现ES6Promise.all批量上传文件,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!微信小程序 ES6Promise.all批量上传文件实现代码客...
    99+
    2022-10-19
  • 微信小程序实现多文件或者图片上传
    本文实例为大家分享了微信小程序实现多文件或者图片上传的具体代码,供大家参考,具体内容如下 html <view class="list1">     <view c...
    99+
    2022-11-13
  • 微信小程序实现上传图片
    本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 //wxml <button class='button' bingtap="uploadSom...
    99+
    2022-11-13
  • 微信小程序实现图片上传
    微信小程序实现图片上传 最近做了个小程序,涉及到了图片上传的功能,今天给大家详细介绍下如何实现小程序图片上传,话不多说先上代码 首先是静态布局和样式部分 .wxml代码部分 ...
    99+
    2023-09-07
    微信小程序 小程序 微信
  • 微信小程序开发文件上传功能怎么实现
    这篇文章主要介绍了微信小程序开发文件上传功能怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发文件上传功能怎么实现文章都会有所收获,下面我们一起来看看吧。保存图片,我认为有两处需要保存&nbs...
    99+
    2023-06-26
  • 微信小程序如何实现文件上传、下载操作
    这篇文章将为大家详细讲解有关微信小程序如何实现文件上传、下载操作,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体如下:前面介绍了微信小程序登录API与获取用户信息操作。...
    99+
    2022-10-19
  • 微信小程序怎么实现多文件或图片上传
    本文小编为大家详细介绍“微信小程序怎么实现多文件或图片上传”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现多文件或图片上传”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。html<view&...
    99+
    2023-07-02
  • 微信小程序实现上传图片小功能
    本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 用到的apiwx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频 功能:点击上传图...
    99+
    2022-11-13
  • SpringBoot+微信小程序实现文件上传与下载功能详解
    目录1、文件上传1.1 后端部分1.2 小程序前端部分1.3 实现效果2、文件下载2.1 后端部分2.2 小程序前端部分2.3 实现效果1、文件上传 1.1 后端部分 1.1.1 引...
    99+
    2022-11-13
  • SpringBoot+微信小程序如何实现文件上传与下载功能
    这篇文章主要介绍SpringBoot+微信小程序如何实现文件上传与下载功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1、文件上传1.1 后端部分1.1 引入Apache Commons FIleUpload组件依...
    99+
    2023-06-29
  • 微信小程序实现图片上传功能
    微信小程序实现图片上传功能随着移动互联网的发展,微信小程序已经成为了人们生活中不可或缺的一部分。微信小程序不仅提供了丰富的应用场景,还支持开发者自定义功能,其中包括图片上传功能。本文将介绍如何在微信小程序中实现图片上传功能,并提供具体的代码...
    99+
    2023-11-21
    微信小程序 图片上传 功能实现
  • 微信小程序如何实现上传图片
    这篇文章主要介绍微信小程序如何实现上传图片,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 一 小程序端user.wxml<view class='u...
    99+
    2022-10-19
  • 微信小程序实现上传视频功能
    本文实例为大家分享了微信小程序上传视频,供大家参考,具体内容如下 微信开发者工具需要安装ffmpeg环境才能正常使用下面的官方方法。 1、调用官方提供的方法(wx.chooseMed...
    99+
    2022-11-13
  • 微信小程序接口加密怎么实现
    本篇内容主要讲解“微信小程序接口加密怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序接口加密怎么实现”吧!场景小程序请求的所有接口参数必须加密,后台返回数据也需要加密,并且增加T...
    99+
    2023-06-26
  • 微信小程序实现上传图片的功能
    本文实例为大家分享了微信小程序实现上传图片的具体代码,供大家参考,具体内容如下 效果图 WXML <view class="img-wrap"> <vie...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作