在Nodejs中使用formidable进行视频上传,找到错误:发布404/502

时间:2018-06-18 05:38:30

标签: node.js ajax video upload

我将视频文件从本地上传到服务器,然后我将其上传到cdn, 我面临的问题是我的代码在本地运行良好,但当我将其修补到服务器时它无效。

这是我的代码

commonJs

$("#uploadVideo").click(function (e) {
    var reader = new FileReader();

    var fileInput = document.getElementById('Videofile');
    var previewUrl = window.URL.createObjectURL(fileInput.files[0]);
    $(".video").attr("src", previewUrl);

    var videotype = "video/mp4";
    var file_data = $("#Videofile").prop("files")[0];


    if (!file_data.type.match(videotype)) {
        return "alert('Please upload mp4 files')"
    } else {
        var metadata = {
            'content-type': 'video/mp4',
            'size': file_data.size,
            'uploaded': new Date(),
        }
        reader.onload = function (e) {
            $("file_data").text("File Content: " + reader.result); // Show the file content
        }
        reader.readAsBinaryString(file_data);
        file_data.onloadedmetadata = function () {
            alert("Meta data for audio loaded");
        };
    };

    var form_data = new FormData();
    form_data.append("file", file_data)
    form_data.append("metdata", metadata)
    for (var key of form_data.entries()) {
        console.log(key[0] + ', ' + key[1]);
    }

    if (form_data != undefined) {
        $.ajax({
            type: "post",
            contentType: false,
            processData: false,
            url: "/api/recordvideo",
            data: form_data,
            dataType: 'json',
            success: function (result) {
                if (result) {
                    $(".video").attr("src", result.videolink);
                    alert("Successfully Uploaded Video");
                    console.log("Successfully Uploaded Video");
                } else {
                    alert("Error on Uploading Video");
                    console.log("Error on Uploading Video");
                }
            },
            error: function (err) {
                console.log("error");
            }

        });
    }
    e.preventDefault();
    e.stopPropagation();
});

服务器侧

app.post('/api/recordvideo',Api.recordvideo);

var Upload = require('gcs-resumable-upload');
ApiService.recordvideo = function (req, res) {

var db = req.db;
console.log("came in cloudupload");
var form = new formidable.IncomingForm();
var filesdata;
form.keepExtensions = true;
form.multiples = false;

form.on('fileBegin', function (name, file){
    file.path = 'public/demo/' + file.name;
    console.log("fileBegin: " + JSON.stringify(file));
});

form.on('file', function (name, file){
    console.log('Uploaded ' + JSON.stringify(file));
    var path = file.path;    
    console.log("came in cloud3 :" + JSON.stringify(path));
});

form.parse(req, function (err, fields, files) {
    console.log("came in cloud0" + JSON.stringify(files));
    filesdata = files;
});


console.log("came in cloud2");
form.on('end', function (fields, files) {

    var userid = appconfig.ObjectID(appconfig.decrypt(req.signedCookies['gid']));
    var path = this.openedFiles[0].path;    

    console.log("came in cloud3 :" + JSON.stringify(path));
    fs.createReadStream(path)
        .pipe(Upload.upload({ bucket: '******', file: path, metadata: { contentType: this.openedFiles[0].type } }))
        .on('finish', function (response) {
            console.log("Successfully Uploaded Video :" + JSON.stringify(response));
            res.send({ "status": false, "videolink": "https://****/****/" + filesdata.file.name });

            });

        });
    //res.send({ "status": false, "err": null });
}

至少在开始时上传到服务器文件夹&然后在Chrome开发人员工具中,它用于给出响应:{readystate:4 ,. 。 。 }

现在,我做了一些更改,然后它甚至没有打到我的api,几秒钟后它在chrome开发人员工具404()/ 502()

中出错

1 个答案:

答案 0 :(得分:0)

好,我找到了解决方案,以前我使用的是 gcs-resumable-upload 模块进行上传,但是现在我尝试使用'@ google-cloud / storage'该模块最多可以上传9mb。

const Storage = require('@google-cloud/storage');
    var db = req.db;
    console.log("came in cloudupload");
    var form = new formidable.IncomingForm();
    var filesdata;
    form.keepExtensions = true;
    form.multiples = false;

    form.parse(req, function (err, fields, files) {
        filesdata = files;
    });

    form.on('end', function (fields, files) {
    var userid = appconfig.ObjectID(appconfig.decrypt(req.signedCookies['gid']));
        var path = this.openedFiles[0].path;
        const storage = new Storage({
            keyFilename: 'gcloudcred.json'
        });
    const myBucket = storage.bucket('onfvideo');
    myBucket.upload(path).then((resp) => {
            console.log('uploaded to' + resp);
            res.send({ "status": true, "err": null });
        }).catch(err => {
                console.error('ERROR:', err);
                res.send({ "status": false, "err": null });
            });
        });
    };

.netframework数据传输限制使我面临9mb的局限性

<system.web>
 <customErrors mode="Off"/>
 <httpRuntime targetFramework="4.5" maxRequestLength="7483648" />
</system.web>

方法2:使用xhr调用RestApi 1.使用google-auto-auth模块生成的访问令牌 2. XMLHttpRequest

var fileInput = $("#Videofile").prop("files")[0];
var url = "https://www.googleapis.com/upload/storage/v1/b/bucketname/o?uploadType=media&name=" + fileInput.name;
var http = new XMLHttpRequest();
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'video/mp4');
http.setRequestHeader("Authorization", "Bearer " + token);
http.send(fileInput);
http.onprogress = function (ev) {
            if (ev.lengthComputable) {
                var percentage = Math.round((ev.loaded / ev.total) * 100);
                console.log("percent " + percentage + '%');
            }else {
              console.log("Unable to compute progress information since the total size is unknown");
            }
        }
http.onloadstart = function (ev) {console.log("start")}
http.onloadend = function (ev) {}
http.onreadystatechange = function () {
    if (http.readyState == 4 && http.status == 200) {
        var response = JSON.parse(http.responseText);
           alert("Successfully Uploaded Video");
        }
 }