Copyright notice: This article is originally published BY CSDN blogger “Koader” under the CC 4.0 BY-SA copyright agreement. Please attach the link of the original source and this statement. Original link: blog.csdn.net/qq_24296235…

How to select files on the Web

In Flutter, we can use FileUploadInputElement to open the file selector.

InputElement uploadInput = FileUploadInputElement();
Copy the code

For example, to open the file selector when the button is clicked, just call the following sentence.

uploadInput.click();
Copy the code

Before we do that, we need to add listeners

uploadInput.multiple=true; / / support for multiple file selection, the default is false uploadInput. OnChange. Listen ((event) {}); // listener, called when the selected file changesCopy the code

This component has the foreach method to traverse the File object

uploadInput.files.forEach((element) { 
      });
Copy the code

Note that the file object that this component gets from Flutter is the html. file class. It cannot transfer files directly using IO.

Now that we’re ready, it’s time for the real work.

Two, the realization of file upload.

The html.File object can retrieve the bloB of a File using the slice method, but we cannot upload blob types directly because blob types only support uploading using method 1, so we can read them with FileReader.

var reader = html.FileReader(); reader.readAsDataUrl(file.slice()); Reader.onloadend. listen((event) {// Read end listen});Copy the code

1. Use HTML package implementation.

var request = html.HttpRequest();
request.open('method', 'url');
var formdata = html.FormData();
formdata.appendBlob('key', file.slice(), file.name);
request.send(formdata);
Copy the code

2. Use HTTP package

reader.onLoadEnd.listen((event) {
          var req = MultipartRequest('method', Uri.parse('uri'));
          req.files.add(MultipartFile.fromString('key',             
                                                reader.result.toString().split(",").last));
          req.fields['key']='value';
          req.send();
      });
Copy the code

Constructing MultipartFile as a string requires converting the result of reader to a string, split(“,”).last is convenient for the back end to save the file after decoding it using Base64.

3. Use DIO package

reader.onLoadEnd.listen((event) {
          var dio = Dio();
          var multipart = MultipartFile.fromString(reader.result.toString().split(",").last,filename: file.name);
 
          var formData = FormData.fromMap({'file':multipart,'data':'data'});
          dio.post('url',data: formData);
      });
Copy the code

If you want to use the multipartfile.frombytes constructor to upload a file, you need to get the Uint8List of bytes

var bytes = Base64Decoder().convert(reader.result.toString().split(",").last);
var multipart = MultipartFile.fromBytes(bytes);
Copy the code

Note that when a MultipartFile is constructed as a byte, the file upload type is octet-stream, and no other key/value pairs can be carried in the form, only the flyer file, otherwise the backend will not recognize the request.

Readers are welcome to post questions in the comments section.