Выберите файл и отправьте через POST с Flutter Web - PullRequest
Новая
       7

Выберите файл и отправьте через POST с Flutter Web

0 голосов
/ 16 января 2020

Постановка проблемы

Привет, в общем, я хочу отправить файл через POST в python серверную Flask API.

Цель состоит в том, чтобы предоставить пользователю интерфейс средства выбора файлов, и после того, как он выберет нужный файл .txt, отправьте его через Dio с помощью запроса POST.

Кнопка (виджет) должна вызывать эту uploadFile() функцию, и все должно обрабатываться ею

Код

Вот мой текущий код: 

import 'package:dio/dio.dart';
import 'dart:html';
import 'package:http/http.dart' as http;

BaseOptions options = new BaseOptions(
  baseUrl: "http://localhost:5000",
  connectTimeout: 5000,
  receiveTimeout: 3000,
);
InputElement uploadInput = FileUploadInputElement();

void uploadFile() async {
  uploadInput.click();
  uploadInput.onChange.listen((e) {
    // read file content as dataURL
    final files = uploadInput.files;
    final reader = new FileReader();

    if (files.length == 1) {
      final file = files[0];

        reader.onLoad.listen((e) {
          sendFile(reader.result);
        });

        reader.readAsDataUrl(file);
      }
  });
}

sendFile(file) {
  var dio = new Dio(options);
  FormData formData = FormData.fromMap({"file": MultipartFile.fromBytes(file), "fileName": 'data.txt'});
  dio.post('/upload', data: formData);
  //dio.post('/upload', data: FormData.fromMap({'file': 'aaaa'}));
}

Результат теста

Проблема здесь в том, что FileReader не имеет метода readAsBytes, поэтому я не могу отправить файл как файл Multipart используя метод fromBytes.

Единственные методы FileReader : readAsDataUrl, readAsArrayBuffer и readAsText Я не хочу читать тело .txt, чтобы отправить его, Я хочу отправить актуальный файл.

Другие попытки

  • Я также пытался использовать file_picker, но кажется, что он не поддерживает Flutter Web

Справочные ссылки

Моя попытка основана на: Существует ли какой-либо плагин или способ загрузки файла на сервер с помощью веб-флаттера?

и некоторые другие, которые я не смог найти снова .

React Inspiration

Мне удалось сделать это в React:

FileUploader. js

export const UploadButton = ({ handler }) => (
    <button onClick={handler.uploadTextFile}>Upload Image</button>
);

export const FileChooser = ({ handler }) => (
    <input
        ref={ref => {
            handler.uploadInput = ref;
        }}
        type="file"
    />
);

Обработчик. js: 

async uploadTextFile(ev) {
        ev.preventDefault();

        this.fileName = uuid.v4();
        const data = new FormData();
        data.append("file", this.uploadInput.files[0]);
        data.append("fileName", this.fileName);
        data.append("setOfWords", this.words);

        await fetch("http://localhost:5000/upload", {
            method: "POST",
            body: data
        });

Cry

Пожалуйста, помогите? Я застрял на нем более 4 дней и пока не мог понять, как решить эту проблему в Flutter Web ...

1 Ответ

0 голосов
/ 16 января 2020

Удалось сделать это:

Как описано в этом сообщении в блоге :

1. Я сделал FileReader прочитанным как DataUrl 

reader.readAsDataUrl(file);

2. Обработайте данные, преобразовав их в Байт 

  Uint8List _bytesData =
      Base64Decoder().convert(file.toString().split(",").last);
  List<int> _selectedFile = _bytesData;

3. Чтобы прочитать его, используйте Multipart.readFromBytes(): 

file = http.MultipartFile.fromBytes('file', _selectedFile,
          contentType: new MediaType('application', 'octet-stream'),
          filename: "text_upload.txt")

4. Чтобы отправить его, используйте http.request 

var url = Uri.parse("http://localhost:5000/upload");
var request = new http.MultipartRequest("POST", url);

request.files.add(http.MultipartFile.fromBytes('file', _selectedFile,
      contentType: new MediaType('application', 'octet-stream'),
      filename: "text_upload.txt"));

request.send().then((response) {
    print("test");
    print(response.statusCode);
    if (response.statusCode == 200) print("Uploaded!");
});

Окончательный код выглядит следующим образом 

import 'dart:convert';
import 'dart:typed_data';
import 'dart:html';
import 'package:http/http.dart' as http;
import 'package:http_parser/http_parser.dart';

InputElement uploadInput = FileUploadInputElement();

void uploadFile() async {
  uploadInput.draggable = true;
  uploadInput.click();
  uploadInput.onChange.listen((e) {
    // read file content as dataURL
    final files = uploadInput.files;
    final reader = new FileReader();

    if (files.length == 1) {
      final file = files[0];

      reader.onLoad.listen((e) {
        sendFile(reader.result);
      });

      reader.readAsDataUrl(file);
    }
  });
}

sendFile(file) {
  var url = Uri.parse("http://localhost:5000/upload");
  var request = new http.MultipartRequest("POST", url);
  Uint8List _bytesData =
      Base64Decoder().convert(file.toString().split(",").last);
  List<int> _selectedFile = _bytesData;

  request.files.add(http.MultipartFile.fromBytes('file', _selectedFile,
      contentType: new MediaType('application', 'octet-stream'),
      filename: "text_upload.txt"));

  request.send().then((response) {
    print("test");
    print(response.statusCode);
    if (response.statusCode == 200) print("Uploaded!");
  });
}
...