微信小程序uploadFile接口實現文件上傳
寫在前面
上節中我們講到小程序的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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- uniapp上傳二進制圖片的實現
- 微信小程序實現拍照和相冊選取圖片
- 微信小程序實現發動態功能的示例代碼
- vue封裝el-upload批量上傳隻請求一次接口
- elementUI自定義上傳文件功能實現(前端後端超詳細過程)