Cách tải tệp lên máy chủ bằng JavaScript

Tải lên tệp một quá trình xử lý tệp đó trong phần phụ trợ trong một trong những chức năng xử lý tệp phổ biến nhất trong ứng dụng web

Tải lên tệp và xử lý tệp đó trong phần phụ trợ ở một trong những chức năng xử lý tệp phổ biến nhất trong ứng dụng web: hãy nghĩ đến việc tải lên hình đại diện hoặc tệp đính kèm.

Giả sử chúng tôi có một phần tử đầu vào tệp HTML:

<input type="file" id="fileUpload" />

Chúng tôi đăng ký một trình xử lý thay đổi trên#fileUpload DOMvà khi người dùng chọn một hình ảnh, chúng tôi sẽ kích hoạthandleImageUpload()chức năng truyền trong tệp đã chọn.

const handleImageUpload = event => {
  const files = event.target.files
  const formData = new FormData()
  formData.append('myFile', files[0])

fetch(’/saveImage’, { method: ‘POST’, body: formData }) .then(response => response.json()) .then(data => { console.log(data.path) }) .catch(error => { console.error(error) }) }

document.querySelector(’#fileUpload’).addEventListener(‘change’, event => { handleImageUpload(event) })

Chúng tôi sử dụngAPI tìm nạpđể gửi tệp đến máy chủ. Khi máy chủ trả về thành công, nó sẽ gửi cho chúng tôi đường dẫn hình ảnh trongpathbất động sản.

Cùng với đó, chúng tôi sẽ làm những gì chúng tôi cần làm, như cập nhật giao diện với hình ảnh.

Xử lý phía máy chủ tải tệp lên bằng Node.js

Phần máy chủ được trình bày chi tiết ở đây bên dưới. Tôi đang sử dụngNode.jsvớibày tỏkhuôn khổ để xử lý yêu cầu.

Cài đặtexpress-fileuploadmô-đun npm:

npm install express-fileupload

và thêm nó vào phần mềm trung gian của bạn:

import fileupload from 'express-fileupload'

//or const fileupload = require(‘express-fileupload’)

Sau khi bạn tạo ứng dụng Express, hãy thêm:

app.use(
		fileupload(),
    //...

Điều này là cần thiết vì nếu không máy chủ không thể phân tích cú pháp tải lên tệp.

Bây giờ các tệp đã tải lên được cung cấp trongreq.files. Nếu bạn quên thêm phần mềm trung gian đó,req.filessẽ làundefined.

app.post('/saveImage', (req, res) => {
  const fileName = req.files.myFile.name
  const path = __dirname + '/images/' + fileName

image.mv(path, (error) => { if (error) { console.error(error) res.writeHead(500, { ‘Content-Type’: ‘application/json’ }) res.end(JSON.stringify({ status: ‘error’, message: error })) return }

<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">writeHead</span>(<span style="color:#ae81ff">200</span>, {
  <span style="color:#e6db74">'Content-Type'</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'application/json'</span>
})
<span style="color:#a6e22e">res</span>.<span style="color:#a6e22e">end</span>(<span style="color:#a6e22e">JSON</span>.<span style="color:#a6e22e">stringify</span>({ <span style="color:#a6e22e">status</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'success'</span>, <span style="color:#a6e22e">path</span><span style="color:#f92672">:</span> <span style="color:#e6db74">'/img/houses/'</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">fileName</span> }))

}) })

Đây là lượng mã nhỏ nhất cần thiết để xử lý tệp.

Chúng tôi gọi làmvthuộc tính của hình ảnh đã tải lên. Điều đó được cung cấp cho chúng tôi bởiexpress-fileuploadmô-đun. Chúng tôi chuyển nó đếnpathvà sau đó chúng tôi thông báo thành công (hoặc lỗi!) lại cho khách hàng.

Kiểm tra thuộc tính của các tệp được tải lên phía máy khách

Nếu bạn cần kiểm tra loại tệp hoặc kích thước tệp, bạn có thể xử lý trước chúng tronghandleImageUploadchức năng, như thế này:

const handleImageUpload = event => {
  const files = event.target.files
  const myImage = files[0]
  const imageType = /image.*/

if (!myImage.type.match(imageType)) { alert(‘Sorry, only images are allowed’) return }

if (myImage.size > (100*1024)) { alert(‘Sorry, the max allowed size for images is 100KB’) return }

//… }

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: