uni-app 上傳文件(三)

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 返回參數說明url

參數 類型 說明
data String 開發者服務器返回的數據
statusCode Number 開發者服務器返回的 HTTP 狀態碼
示例code

uni.chooseImage({orm

success: function (chooseImageRes) {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    uni.uploadFile({
        url: 'https://www.example.com/upload', //僅爲示例,非真實的接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {
            'user': 'test'
        },
        success: function (uploadFileRes) {
            console.log(uploadFileRes.data);
        }
    });
}

});
返回值對象

返回一個 uploadTask 對象,經過 uploadTask,可監聽上傳進度變化事件,以及取消上傳任務。接口

uploadTask 對象的方法列表事件

方法 參數 說明
onProgressUpdate callback 監聽上傳進度變化
abort   中斷上傳任務
onProgressUpdate 返回參數說明

參數 類型 說明
progress Number 上傳進度百分比
totalBytesSent Number 已經上傳的數據長度,單位 Bytes
totalBytesExpectedToSend Number 預期須要上傳的數據總長度,單位 Bytes
示例

uni.chooseImage({

success: function (chooseImageRes) {
    const tempFilePaths = chooseImageRes.tempFilePaths;
    const uploadTask = uni.uploadFile({
        url: 'https://www.example.com/upload', //僅爲示例,非真實的接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {
            'user': 'test'
        },
        success: function (uploadFileRes) {
            console.log(uploadFileRes.data);
        }
    });

    uploadTask.onProgressUpdate(function (res) {
        console.log('上傳進度' + res.progress);
        console.log('已經上傳的數據長度' + res.totalBytesSent);
        console.log('預期須要上傳的數據總長度' + res.totalBytesExpectedToSend);

        // 測試條件,取消上傳任務。
        if (res.progress > 50) {
            uploadTask.abort();
        }
    });
}

});
uni.downloadFile(OBJECT)
下載文件資源到本地,客戶端直接發起一個 HTTP GET 請求,返回文件的本地臨時路徑。

OBJECT 參數說明

參數名 類型 必填 說明
url String 是 下載資源的 url
header Object 否 HTTP 請求 Header, header 中不能設置 Referer
success Function 否 下載成功後以 tempFilePath 的形式傳給頁面,res = {tempFilePath: '文件的臨時路徑'}
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數(調用成功、失敗都會執行)
注:文件的臨時路徑,在應用本次啓動期間能夠正常使用,如需持久保存,需在主動調用 uni.saveFile,才能在應用下次啓動時訪問獲得。

success 返回參數說明

參數 類型 說明
tempFilePath String 臨時文件路徑,下載後的文件會存儲到一個臨時文件
statusCode Number 開發者服務器返回的 HTTP 狀態碼
示例

uni.downloadFile({

url: 'https://www.example.com/file/test', //僅爲示例,並不是真實的資源
success: function (res) {
    if (res.statusCode === 200) {
        console.log('下載成功');
    }
}

});
返回值

返回一個 downloadTask 對象,經過 downloadTask,可監聽上傳進度變化事件,以及取消上傳任務。

downloadTask 對象的方法列表

方法 參數 說明 最低版本
onProgressUpdate callback 監聽下載進度變化 *
abort   中斷下載任務 *
onProgressUpdate 返回參數說明

參數 類型 說明
progress Number 下載進度百分比
totalBytesWritten Number 已經下載的數據長度,單位 Bytes
totalBytesExpectedToWrite Number 預期須要下載的數據總長度,單位 Bytes
示例

const downloadTask = uni.downloadFile({

url: 'http://www.example.com/file/test', //僅爲示例,並不是真實的資源
success: function (res) {
    if (res.statusCode === 200) {
        console.log('下載成功');
    }
}

});

downloadTask.onProgressUpdate(function (res) {

console.log('下載進度' + res.progress);
console.log('已經下載的數據長度' + res.totalBytesWritten);
console.log('預期須要下載的數據總長度' + res.totalBytesExpectedToWrite);

// 測試條件,取消下載任務。
if (res.progress > 50) {
    downloadTask.abort();
}

});

相關文章
相關標籤/搜索