基本語法
uni.uploadFile(OBJECT)
OBJECT?是一個包含上傳相關配置的對象，常見參數如下：
| 參數 | 類型 | 必填 | 說明 |
|---|---|---|---|
url | String | 是 | 開發者服務器地址。 |
filePath | String | 是 | 要上傳文件資源的本地路徑。 |
name | String | 是 | 文件對應的 key，開發者在服務端可以通過這個 key 獲取文件的二進制內容。 |
header | Object | 否 | HTTP 請求 Header，Header 中不能設置 Referer。 |
formData | Object | 否 | HTTP 請求中其他額外的 form data。 |
success | Function | 否 | 接口調用成功的回調函數。 |
fail | Function | 否 | 接口調用失敗的回調函數。 |
complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行）。 |
使用示例
前端代碼（uni-app）
以下代碼實現了從本地選擇圖片并上傳到服務器的功能。
// 選擇圖片并上傳
uni.chooseImage({count: 1,success: function (res) {const tempFilePaths = res.tempFilePaths;uni.uploadFile({url: 'https://example.com/upload', // 替換為實際的后端接口地址filePath: tempFilePaths[0],name: 'file',header: {'Authorization': 'Bearer your_token'},formData: {'key1': 'value1','key2': 'value2'},success: function (uploadRes) {console.log('上傳成功', uploadRes.data);},fail: function (err) {console.log('上傳失敗', err);}});}
});
代碼解釋
- 選擇圖片：使用?
uni.chooseImage?方法從本地相冊選擇一張圖片，獲取其臨時文件路徑。 - 上傳文件：調用?
uni.uploadFile?方法，將選擇的圖片上傳到指定的服務器地址。url：指定后端服務器的接口地址。filePath：圖片的臨時文件路徑。name：文件在表單中的字段名，后端通過該字段名獲取文件。header：設置請求頭，可用于身份驗證等。formData：傳遞額外的表單數據。
后端代碼示例（Node.js + Express + multer）
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;
import java.util.Map;@RestController
@RequestMapping("/api")
public class FileUploadController {@PostMapping(value = "/upload", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)public ResponseEntity<String> uploadFile(@RequestParam("file") MultipartFile file,@RequestHeader("Authorization") String authorization,@RequestParam Map<String, String> formData) {if (file.isEmpty()) {return ResponseEntity.badRequest().body("文件為空，請選擇文件上傳");}try {// 共享文件夾路徑String sharedFolderPath = "/mydata/app/doc/shouqian_file/";// 獲取文件名String fileName = file.getOriginalFilename();// 構建目標文件路徑Path targetPath = Paths.get(sharedFolderPath, fileName);// 創建共享文件夾（如果不存在）File sharedFolder = new File(sharedFolderPath);if (!sharedFolder.exists()) {if (!sharedFolder.mkdirs()) {return ResponseEntity.status(500).body("無法創建共享文件夾");}}// 將文件保存到共享文件夾Files.write(targetPath, file.getBytes());// 打印讀取到的請求頭和表單數據System.out.println("Authorization: " + authorization);System.out.println("Form Data: " + formData);return ResponseEntity.ok("文件上傳成功");} catch (IOException e) {e.printStackTrace();return ResponseEntity.status(500).body("文件上傳失敗：" + e.getMessage());}}
}代碼解釋
@RestController：表明這是一個 RESTful 風格的控制器。@PostMapping：指定處理 POST 請求的路徑為?/api/upload，并且指定請求的內容類型為?multipart/form-data。@RequestParam("file") MultipartFile file：用于接收上傳的文件。@RequestHeader("Authorization") String authorization：從請求頭中獲取?Authorization?字段的值。@RequestParam Map<String, String> formData：以鍵值對的形式接收前端傳遞的?formData。
