uniapp中uploadFile的用法

基本语法

uni.uploadFile(OBJECT)

OBJECT 是一个包含上传相关配置的对象，常见参数如下：

使用示例

前端代码（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。