## uni.uploadFile(OBJECT) 將本地資源上傳到開發者服務器，客戶端發起一個 POST 請求，其中 content-type 為 multipart/form-data。 如頁面通過 uni.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后，可通過此接口將本地資源上傳到指定服務器。 **OBJECT 參數說明** ``` 參數名 類型 必填 說明 平臺支持 url String 是 開發者服務器 url files Aarry 否 需要上傳的文件列表。使用 files 時，filePath 和 name 不生效。 5+App filePath String 是 要上傳文件資源的路徑。 name String 是 文件對應的 key , 開發者在服務器端通過這個 key 可以獲取到文件二進制內容 header Object 否 HTTP 請求 Header, header 中不能設置 Referer formData Object 否 HTTP 請求中其他額外的 form data success Function 否 接口調用成功的回調函數 fail Function 否 接口調用失敗的回調函數 complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行） ``` **files參數說明 ** ``` files 參數是一個 file 對象的數組，file 對象的結構如下： name String 否 multipart 提交時，表單的項目名，默認為 file uri String 是 文件的本地地址 ``` **success 返回參數說明** ``` 參數 類型 說明 data String 開發者服務器返回的數據 statusCode Number 開發者服務器返回的 HTTP 狀態碼 ``` **返回值** 返回一個 uploadTask 對象，通過 uploadTask，可監聽上傳進度變化事件，以及取消上傳任務。 ### uploadTask 對象的方法列表 ``` onProgressUpdate callback 監聽上傳進度變化 abort 中斷上傳任務 onProgressUpdate 返回參數說明 ``` ``` 參數 類型 說明 progress Number 上傳進度百分比 totalBytesSent Number 已經上傳的數據長度，單位 Bytes totalBytesExpectedToSend Number 預期需要上傳的數據總長度，單位 Bytes ``` **實戰：選擇一個照片上傳（帶進度條）** ``` <template> <view> <view> <progress :percent="percent" stroke-width="10"></progress> </view> <view> <button type="primary" :loading="loading" :disabled="disabled" @click="upload">選擇照片</button> </view> </view> </template> <script> var _self; export default { data:{ percent:0, loading:false, disabled:false }, methods : { upload : function(){ _self = this; uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album'], //從相冊選擇 success: function (res) { const tempFilePaths = res.tempFilePaths; const uploadTask = uni.uploadFile({ url : 'https://demo.hcoder.net/index.php?c=uperTest', filePath: tempFilePaths[0], name: 'file', formData: { 'user': 'test' }, success: function (uploadFileRes) { console.log(uploadFileRes.data); } }); uploadTask.onProgressUpdate(function (res) { _self.percent = res.progress; console.log('上傳進度' + res.progress); console.log('已經上傳的數據長度' + res.totalBytesSent); console.log('預期需要上傳的數據總長度' + res.totalBytesExpectedToSend); }); }, error : function(e){ console.log(e); } }); } }, onLoad:function(){ } } </script> ``` **后端文件接收代碼（php 版）** ``` <?php class uperTestController extends witController{ public function index(){ if(!empty($_FILES['file'])){ //獲取擴展名 $exename = $this->getExeName($_FILES['file']['name']); if($exename != 'png' && $exename != 'jpg' && $exename != 'gif'){ exit('不允許的擴展名'); } $imageSavePath = uniqid().'.'.$exename; if(move_uploaded_file($_FILES['file']['tmp_name'], $imageSavePath)){ echo $imageSavePath; } } } public function getExeName($fileName){ $pathinfo = pathinfo($fileName); return strtolower($pathinfo['extension']); } } ```