商城网站建设制作设计电话营销系统

基本语法

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);}});}
});

代码解释

1. 选择图片：使用 uni.chooseImage 方法从本地相册选择一张图片，获取其临时文件路径。
2. 上传文件：调用 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。