uploadFile

uploadFile là API dùng để upload file từ máy lên server.

Lưu ý

Chỉ thực hiện được việc upload các đường dẫn tạm thời của file ví dụ đường dẫn từ api chooseImage, downloadFile.

Ví dụ

Example bên dưới lấy ra 1 hình từ gallery và upload lên http://httpbin.org/post

import apis from '@v-miniapp/apis'

function onUploadFile() {
  apis.chooseImage({
    count: 1,
    success: (res) => {
      const path = res.filePaths[0];
      console.log(path);
      apis.uploadFile({
        url: "http://httpbin.org/post",
        fileType: "image/jpeg",
        fileName: "file",
        filePath: path,
        success: (res) => {
          console.log(res);
          apis.alert({ title: "Upload success" });
        },
        fail: function (res) {
          console.log(res);
          apis.alert({ title: "Upload fail" });
        },
      });
    },
  });
}

function onUploadMultipleFiles() {
  apis.chooseImage({
    count: 1,
    success: (res) => {
      const paths = res.filePaths;
      apis.uploadFile({
        url: "http://httpbin.org/post",
        fileType: "image/jpeg",
        fileName: "files",
        filePaths: path,
        success: (res) => {
          console.log(res);
          apis.alert({ title: "Upload success" });
        },
        fail: function (res) {
          console.log(res);
          apis.alert({ title: "Upload fail" });
        },
      });
    },
  });
}

Tham số

Để cấu hình việc gọi network, bạn cần truyền object với các thuộc tính sau:

Thuộc tính		Bắt buộc	Mô tả
url	string	✓	Đường dẫn của server muốn upload
method	string		Phương thức gọi network. Mặc định sẽ là POST.
fileName	string	✓	Tên file của như sử dụng làm key trong form data, server sẽ lấy ra file từ field này
filePath	string		Đường dẫn tạm thời của file
filePaths	string[]		Trong trường hợp upload multiple files thì là mảng các đường dẫn của file
formData	FormData		Các field khác của form cần send khi upload file
fileType	string	✓	Mime type của file
headers	Object		Cấu hình headers khi thực hiện gọi network.
success	Function		Callback function khi việc upload file thành công.
fail	Function		Callback function khi việc upload file thất bại.
complete	Function		Callback function khi việc upload file kết thúc cho dù thành công hay thất bại.

Success Callback function payload

Callback function payload

Thuộc tính	Kiểu dữ liệu	Mô tả
data	String	Dữ liệu đươc trả về từ server upload

Các lỗi hay gặp khi upload file.

• File không tồn tại -> do đường dẫn không đúng.
• Upload fail từ server-> có thể file quá lớn, hoặc ko có permission. 1 số server yêu cầu truyền authorization token, nên khi gọi uploadFile phải truyền thêm headers.
• Trong formData có thể gửi giá trị base64 nhưng không nên lạm dụng vì sẽ khiến payload của việc upload tăng lên nhiều và việc upload có thể mất nhiều thời gian hơn.
• Hiện chỉ cho upload file image, audio và video, và chỉ upload đươc 1 file/lần.

Tham khảo nodejs server

File server.js để test upload file(s) cho các develop phát triển miniapp

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');
const cors = require('cors');
const helmet = require('helmet');
const morgan = require('morgan');
require('dotenv').config();

const app = express();
const PORT = process.env.PORT || 3003;

const uploadsDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadsDir)) {
  fs.mkdirSync(uploadsDir, { recursive: true });
}

app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'"],
      styleSrc: ["'self'", "'unsafe-inline'"],
      imgSrc: ["'self'", "data:", "https:"],
    },
  },
}));
app.use(cors());
app.use(morgan('combined'));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use('/uploads', express.static('uploads'));
app.use(express.static('public'));

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const fileFilter = (req, file, cb) => {
  cb(null, true);
};

const upload = multer({ 
  storage: storage,
  fileFilter: fileFilter,
  limits: {
    fileSize: 10 * 1024 * 1024 // 10MB limit
  }
});

app.get('/', (req, res) => {
  res.json({
    message: 'File Upload Server',
    version: '1.0.0',
    endpoints: {
      'POST /api/upload/single': 'Upload a single file',
      'POST /api/upload/multiple': 'Upload multiple files',
      'GET /api/files': 'List uploaded files',
      'GET /uploads/:filename': 'Download/view uploaded file'
    }
  });
});

// Single file upload
app.post('/api/upload/single', upload.single('file'), (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: 'No file uploaded' });
    }

    res.json({
      message: 'File uploaded successfully',
      file: {
        originalName: req.file.originalname,
        filename: req.file.filename,
        mimetype: req.file.mimetype,
        size: req.file.size,
        url: `/uploads/${req.file.filename}`
      }
    });
  } catch (error) {
    res.status(500).json({ error: 'Upload failed', details: error.message });
  }
});

// Multiple files upload
app.post('/api/upload/multiple', upload.array('files', 10), (req, res) => {
  try {
    if (!req.files || req.files.length === 0) {
      return res.status(400).json({ error: 'No files uploaded' });
    }

    const uploadedFiles = req.files.map(file => ({
      originalName: file.originalname,
      filename: file.filename,
      mimetype: file.mimetype,
      size: file.size,
      url: `/uploads/${file.filename}`
    }));

    res.json({
      message: `${req.files.length} files uploaded successfully`,
      files: uploadedFiles
    });
  } catch (error) {
    res.status(500).json({ error: 'Upload failed', details: error.message });
  }
});

// List uploaded files
app.get('/api/files', (req, res) => {
  try {
    const files = fs.readdirSync(uploadsDir);
    const fileList = files.map(filename => {
      const filePath = path.join(uploadsDir, filename);
      const stats = fs.statSync(filePath);
      return {
        filename,
        size: stats.size,
        uploadDate: stats.birthtime,
        url: `/uploads/${filename}`
      };
    });

    res.json({
      message: 'Files retrieved successfully',
      count: fileList.length,
      files: fileList
    });
  } catch (error) {
    res.status(500).json({ error: 'Failed to retrieve files', details: error.message });
  }
});

// 404 handler
app.use('*', (req, res) => {
  res.status(404).json({ error: 'Route not found' });
});

// Start server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
  console.log('Upload endpoints:');
  console.log(`  POST http://localhost:${PORT}/api/upload/single`);
  console.log(`  POST http://localhost:${PORT}/api/upload/multiple`);
  console.log(`  GET  http://localhost:${PORT}/api/files`);
});

module.exports = app;