Node js Dropzone js - 上傳文件而不提交表單

Question

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

這是我的html代碼：

<form id="add_user" name="add_user" class="form-horizontal" action="/add-new-user" method="POST">
    <div class="directory-bg text-center">
        <div class="directory-overlay">
                <span id="imageuploader">
                    <input name="profileimg" id="profileimg" type="hidden" value="">
                    <img id="ws_user_avatar" class="rounded-circle thumb-lg img-thumbnail dropzone" data-thumb="public/assets/images/users/user.png" src="public/assets/images/users/user.png" alt="Generic placeholder image">
                    <!--<div class="fallback">
                        <input name="image" id="image" type="file">
                    </div>-->
                    <a href="javascript:void(0)" id="remove_img">x</a>
                </span>
        </div>
    </div>

    <div class="directory-content p-4">
        <div class="mt-4">
            <% if(success != "") {%> 
                <div class="alert alert-success" role="alert">
                    <strong>Done!</strong> <%= success %>
                </div>
            <% } %>
            <div class="row">                                                            
                <div class="col-md-12">
                    <div class="mb-3">
                        <label class="form-label" for="email">Email Address</label>
                        <input type="email" class="form-control" name="email" id="email" placeholder="Email Address" data-key="Email Address" autocomplete="off" autofill="false">
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label" for="fname">First Name</label>
                        <input type="text" class="form-control" name="fname" id="fname" placeholder="First Name" data-key="First Name" autocomplete="off" autofill="false">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label" for="lname">Last Name</label>
                        <input type="text" class="form-control" 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");
    //     });
    
    //   });
});

當調用 dropzone myDropzone.processQueue()函數時，我在后處理函數TypeError: Cannot read property 'file' of undefined中收到一條錯誤消息。

誰能建議我哪里做錯了？

非常感謝！

Answer 1

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

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