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。

非常感谢！

编辑

这里有一些新尝试，但绝对没有成功...

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”：要解码的字符串未正确编码。”

和canvasToBlob也给我一个错误： [Vue警告]：v-on处理程序中的错误：“ TypeError：canvas.toDataURL不是函数”

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

也不起作用，请给我一个空文件

dataUrl->将文件保存在js / PHP中

0 个答案: