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

實戰：選擇一個照片上傳(帶進度條)

選擇照片

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(){

}

}

后端文件接收代碼(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']);

}

}

總結

以上是生活随笔為你收集整理的app开发上传文件夹到服务器,uni-app 上传（图片上传实战）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。