2017-06-07 70 views
0

我曾經嘗試這樣做的PHP和HTML文件上傳: https://www.w3schools.com/php/php_file_upload.asp如何使用React.js和Node.js將文件上傳到本地文件夾?

,我想知道如果同樣可以用React.js/Nodes.js來完成。 我不是很習慣編碼,從來沒有使用過React.js。

+0

NodeJS完全可以做到這一點。你甚至不需要React。這個問題通常太寬泛而無法回答。儘管如此,繼續尋找相同的方向,你想要做的事情是非常可能的。 –

回答

0

你可以把它分成部分: 在Node.js中完成的後端部分。因此,您可以使用像ExpressJS這樣的框架作爲框架。添加一條POST路線並處理您的文件上傳。

第二部分是React。 React與後端系統無關。它只用於構建GUI。這是一個花哨的HTML和JavaScript的組合。

0

如果你想知道關於處理這種工藝複雜,下面是用強大的包裝中的Node.js來處理文件上傳

/** UPLOAD a file **/ 
    app.post('/upload', isLoggedIn, (req, res) => { 
    // create an incoming form object 
    var form = new formidable.IncomingForm(); 

    // specify that we want to allow the user to upload multiple files in a single request 
    form.multiples = true; 

    // store all uploads in the /uploads directory 
    form.uploadDir = path.join(__dirname, '../../uploads'); 

    // every time a file has been uploaded successfully, 
    // rename it to it's orignal name 
    form.on('file', function(field, file) { 
     logger.info(`Uploaded: "${file.name}"`); 
     fs.rename(file.path, path.join(form.uploadDir, file.name)); 
    }); 

    // log any errors that occur 
    form.on('error', function(err) { 
     errorLogger.error('During file upload: ' + err); 
    }); 

    // once all the files have been uploaded, send a response to the client 
    form.on('end', function() { 
     res.end('success'); 
    }); 

    // parse the incoming request containing the form data 
    form.parse(req); 
    }); 

我的特定的客戶端實現沒的代碼片段不使用React,只是使用jQuery Dropzone插件的普通HTML/Javascript頁面,但是我看到React具有上傳器軟件包,就像'react-dropzone'一樣。

Here是鏈接回完整的示例存儲庫,完成node.js中的文件上傳檢出upload.js文件以查看客戶端文件流如何完成到節點服務器。

+0

如何連接到: ? 抱歉問了很多,因爲我對編碼知之甚少 – sventastic

+0

我添加了一個鏈接回到在node.js中完成文件上傳的完整示例中我建議查看該代碼以查看完整的客戶端/服務器工作場景。 – Daniel

相關問題