NodejsDropzonejs-上傳檔案而不提交表單

我是 node js 的新手，并嘗試使用 dropzone js 集成單個檔案上傳。我想在提交表單之前上傳圖片。我已經設法在提交之前呼叫了上傳操作。

這是我的html代碼：

<form id="add_user" name="add_user" class="form-horizontal" action="/add-new-user" method="POST">
    <div >
        <div >
                <span id="imageuploader">
                    <input name="profileimg" id="profileimg" type="hidden" value="">
                    <img id="ws_user_avatar"  data-thumb="public/assets/images/users/user.png" src="public/assets/images/users/user.png" alt="Node js Dropzone js - 上傳檔案而不提交表單">
                    <!--<div >
                        <input name="image" id="image" type="file">
                    </div>-->
                    <a href="javascript:void(0)" id="remove_img">x</a>
                </span>
        </div>
    </div>

    <div >
        <div >
            <% if(success != "") {%> 
                <div  role="alert">
                    <strong>Done!</strong> <%= success %>
                </div>
            <% } %>
            <div >                                                            
                <div >
                    <div >
                        <label  for="email">Email Address</label>
                        <input type="email"  name="email" id="email" placeholder="Email Address" data-key="Email Address" autocomplete="off" autofill="false">
                    </div>
                </div>
            </div>

            <div >
                <div >
                    <div >
                        <label  for="fname">First Name</label>
                        <input type="text"  name="fname" id="fname" placeholder="First Name" data-key="First Name" autocomplete="off" autofill="false">
                    </div>
                </div>
                <div >
                    <div >
                        <label  for="lname">Last Name</label>
                        <input type="text"  id="lname" name="lname" placeholder="Last Name" data-key="Last Name" autocomplete="off" autofill="false">
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

這是處理dropzone事件的js代碼

   Dropzone.autoDiscover = false;
        var myDropzone = new Dropzone(".dropzone", {
        url: '/upload-image',
        autoProcessQueue: false,
        uploadMultiple: false,
        maxFiles:2,
        maxFilesize: 2,
        createImageThumbnails:false,
        hiddenInputContainer: "img.rounded-circle",
        init: function(file) {
            var prevFile = null;
            this.on("addedfile", function(file) {
                var $this = this;
                setTimeout(function () {
                    if(file.status == "error"){
                        alert(file.previewTemplate.innerText);
                    } else {
                        if(prevFile){
                            $this.removeFile($this.files[0])
                        }
                        prevFile = file;
                        
                        $("#user_avatar").attr('data-imgname', file.name);
                        previewImage($this);
                    }
                }, 10);
            });
        }
    });

    function previewImage(input){
        let fileReference = input.files && input.files[0];
        if(fileReference){
            var reader = new FileReader();
            reader.onload = (event) => {
                document.getElementById('user_avatar').src = event.target.result;
            }
            reader.readAsDataURL(fileReference); 
        }
    }
    $(document).on('click','#btn_submit', function(e){
        e.preventDefault();
        if(myDropzone.getQueuedFiles().length > 0){
            myDropzone.processQueue();
        } else {
            $("#add_user").submit();
        }
    });

這是 router.js 檔案中的后處理程式代碼：

 const express = require('express');
const router = express.Router();

router.post('/upload-image', function(req, res){
    console.log('requested inage',req.files.file.path);
    // fs.readFile(request.files.file.path, function(err, data) {

    //     var newPath = __dirname   "/public/img/xspectra/customlogo.png";
    //     fs.writeFile(newPath, data, function (err) {
    //       console.log("Finished writing file..."   err);
    //       response.redirect("back");
    //     });
    
    //   });
});

呼叫dropzonemyDropzone.processQueue()函式時，我在 post handler function 中收到一條錯誤訊息TypeError: Cannot read property 'file' of undefined。

誰能建議我哪里做錯了？

非常感謝！

uj5u.com熱心網友回復：

這意味著上傳的檔案沒有正確到達您的網路服務器。您是否在 nodejs 端使用express-fileupload來處理上傳？

如果是這樣，我建議在一個非常棒的教程中查看此鏈接

標籤：节点.js 上传文件 dropzone.js ajax 上传

上一篇：使用地圖時到達物件內部的資料

下一篇：如何在php中生成等效于node.js的哈希值