dataUrl -> сохранить файл в js / PHP

Question

Я пытаюсь загрузить файлы разных типов, включая файлы GPX. Я всегда боролся с файлами, так что извините, если мой вопрос звучит глупо ...

EDIt: может быть, моя проблема на самом деле в том, что я не знаю, что это такое и что с этим делать: blob: http://127.0.0.1/d2b73815-b666-4980-a3a2-2537c3299498 (это называется dataUrl?)

Я использую vue-upload-component, поэтому у меня есть функция перетаскивания, и вот файл, который я получаю:

[ { "fileObject": true, "size": 43574, "name": "490618.gpx", "type": "", "active": false, "error": "", "success": false, "timeout": 0, "file": {}, "response": {}, "progress": "0.00", "speed": 0, "data": {}, "headers": {}, "id": "iy3prwuyoo", "blob": "blob:http://127.0.0.1/083ff00c-ff18-4a23-b063-207753a63dc4" } ]

Я бы хотел использовать этот блоб "blob: http://127.0.0.1/083ff00c-ff18-4a23-b063-207753a63dc4"

поэтому я отправляю этот объект (gpxFile)

uploadFile(){
      if(this.gpxFiles.length>0){
        this.gpxFiles.forEach(function(gpxFile) {
          axios.post('/uploadgpxfile/', gpxFile).then(
                response => {
                    console.log(response.data);
                }
            );
        });
      }
    }


and here is my controller (PHP)



public function uploadgpxfile(Request $request){
        $blob = $request->blob;
        $filename = $request->name;

        $path ="/gpx/" . $filename;

        file_put_contents(
            $path,
            $blob
        );

        //some more actions
    }

This doesn't work, I guess I should convert it to a blob first.


So I downloaded blob-util package https://www.npmjs.com/package/blob-util
And then figured out that I have a GPX file and not an image. So i have a big doubt on wether I need to convert it to blob first, or if I can just store my file like this...



blobUtil.canvasToBlob(canvas, 'image/png').then(/* ... */)

Я использую vuejs и laravel.

Большое спасибо!

EDIT

Вот несколько новых попыток, которые больше не имеют успеха ...

uploadFile(){
      if(this.gpxFiles.length>0){
        this.gpxFiles.forEach(function(gpxFile) {

            gpxFile.blob = utils.dataURItoBlob(gpxFile.blob);

            gpxFile.blob = canvasToBlob(gpxFile.blob, 'application/gpx+xml');

                axios.post('/uploadgpxfile/', gpxFile).then(
                    response => {
                        console.log(response.data);
                        this.tracesTdt=response.data;
                    }
                )
        });
      }
    },

с функцией dataURItoBlob:

export function dataURItoBlob(dataURI) {
          var byteString = dataURI = atob(dataURI.split(',')[1]);
          var mimeString = "application/gpx+xml";
          var ab = new ArrayBuffer(byteString.length);
          var dw = new DataView(ab);
          for(var i = 0; i < byteString.length; i++) {
              dw.setUint8(i, byteString.charCodeAt(i));
          }
          return new Blob([ab], {type: mimeString});
      }

но я получаю эту ошибку "" InvalidCharacterError: Не удалось выполнить 'atob' для 'Window': строка, которая должна быть декодирована, неправильно закодирована. "

и canvasToBlob также выдает мне ошибку: [Vue warn]: ошибка в обработчике v-on: «Ошибка типа: canvas.toDataURL не является функцией»

(async () => {
     gpxFile.blob = await fetch(gpxFile.blob).then(r => r.blob()
    ); 

тоже не работает и дает мне пустой файл