dataUrl - >以js / PHP保存文件

Question

I am trying to upload different types of files, including GPX files. I have always been struggling with files, so sorry if my question sounds stupid...

EDIt: maybe my problem is actually that I don't know what this is and what to do with this: blob:http://127.0.0.1/d2b73815-b666-4980-a3a2-2537c3299498 (is that called a dataUrl ? )

I am using vue-upload-component, so I have a drag and drop function and here is the file I get:

[ { "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" } ]

I would like to use this blob "blob:http://127.0.0.1/083ff00c-ff18-4a23-b063-207753a63dc4"

so i send this object (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(/* ... */)

I am using vuejs and laravel.

Thanks a lot!

EDIT

Here are some new tries with absolutely no more success ...

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;
                    }
                )
        });
      }
    },

with dataURItoBlob function:

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});
      }

but I get this error ""InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded."

and canvasToBlob also gives me an error: [Vue warn]: Error in v-on handler: "TypeError: canvas.toDataURL is not a function"

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

doesn't work either and give me an empty file