欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序uploadFile接口實現(xiàn)文件上傳

 更新時間：2022年08月23日 16:50:42   作者：德宏大魔王  
這篇文章主要介紹了微信小程序uploadFile接口實現(xiàn)文件上傳流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

寫在前面

上節(jié)中我們講到小程序的request請求，掌握了基本的網(wǎng)絡(luò)請求方式，這節(jié)我們通過小程序的uploadFile接口能力完成對小程序上傳操作（uni.uploadFile，后端php接口），通過這一節(jié)你可以學(xué)習(xí)到php的上傳接口的寫法，以及如何配合前端完成一個小程序上傳操作

創(chuàng)建前端頁面

我們默認使用創(chuàng)建新項目進行講解，在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>

通過前端點擊“點擊上傳”來調(diào)用對應(yīng)的方法 

創(chuàng)建后運行如下

這里插一嘴，由于博主是全棧開發(fā)的，我給大家總結(jié)一下這部分與微信開發(fā)者工具 語法的區(qū)別

①uniapp必須用template標簽嵌套

否則

②小程序點擊事件用bindtap 而uniapp用@click

③uniapp的方法需要放在methods: {}里面

寫入js事件-完成上傳操作

接下來我們在剛剛創(chuàng)建測試的方法upload中進行修改，首先整個動作原理是：通過點擊按鈕觸發(fā)upload方法=》選擇文件獲取到本地的路徑=》上傳給服務(wù)器=》服務(wù)器返回上傳的文件名（上傳后隨機生成的）

了解到整個流程后我們先將 文件進行選擇

uni.chooseImage示例

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

將代碼放在unload中運行測試

可以看到已經(jīng)生成了臨時的文件

接下來我們通過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接口文件

在寫事件前，我通過在服務(wù)器上新建一個php文件作為文件上傳的接口

新建tp_imgsrc.php

考慮到大多數(shù)初學(xué)者這里決定用原生php進行開發(fā)

<?php 
// 上傳圖片 
function uploadimg() { 
    $file = $_FILES['file'];
    if ($file) { 
        //var_dump($file);
        // 獲取文件后綴名
        $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
        $target = 'upload/' . uniqid() . '.' . $ext;
        // 轉(zhuǎn)移圖片地址
        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();

完成后整個目錄是這樣的（層級關(guān)系）

實現(xiàn)上傳功能

接下來 我們將剛剛的上傳接口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);
								}
							});
				}
			});

測試運行看看

返回了文件名和我自己定義的返回碼

可以看到服務(wù)器上也是存在這個文件的

完善上傳功能

最重要的步驟我們已經(jīng)做完了，那上傳成功是不是得告訴下上傳的用戶告訴他們上傳成功了？

于是我們需要做一下判斷，當(dāng)errCode==0的時候高速用戶上傳成功

但是發(fā)現(xiàn)了個問題，php返回的是數(shù)組，為啥到uniapp返回的是字符串？

指導(dǎo)我看了下官方的文檔

返回的是字符類型

解決辦法：

      let param_json = JSON.stringify(this.$data)//轉(zhuǎn)為字符串
      let bookkeeping_data = JSON.parse(bookkeeping_data_string)//轉(zhuǎn)換為JSON

測試后完美解決

改動到的代碼

let json_data = JSON.parse(uploadFileRes.data)
console.log(json_data['errCode']);

接下來就可以將信息告訴用戶是否上傳成功了

uni.showToast示例

uni.showToast({
	title: '標題',
	icon:'none'
	duration: 2000
});

相應(yīng)的代碼：

					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>

到此這篇關(guān)于微信小程序uploadFile接口實現(xiàn)文件上傳的文章就介紹到這了,更多相關(guān)小程序uploadFile內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論