Nodejs viết tệp nhị phân

Question

Trang tải lên tải lại khi gửi tệp để tải lên. Bạn là người mới sử dụng React và đang sử dụng phong cách chung này để tải tệp lên web?

Nội dung chính Show

Tải lên một tệp React
Gửi tệp đến máy chủ
Tạo một máy chủ đơn giản với Node
Tải lên nhiều tệp trong React
Xác nhận xử lý
#1 Có quá nhiều tệp
#2 Tải lên hình ảnh có phần mở rộng tệp sai
#3 Tải lên hình ảnh quá lớn
Cải thiện UX với thanh tiến trình và Toastify
Thanh tiến trình
Hiển thị thông báo kết quả với toastify

Có một cách tốt hơn để xử lý tải lên trong React

Hướng dẫn này là câu trả lời

Hôm nay, nó sẽ thay đổi mãi mãi nếu bạn xem qua hướng dẫn này và triển khai nó trên trang web của mình

Chúng tôi sẽ sử dụng Node với React để tải lên nhiều tệp cùng một lúc. Khi chúng tôi tiếp tục, sẽ có xác thực phía máy khách đơn giản và cuối cùng với thông báo đã tải lên có thể được hiển thị bằng phản ứng-toastify

Như mọi khi, hãy bắt đầu một ứng dụng phản ứng với

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

6

Bao gồm CDN bootstrap trong chỉ mục. html

Ngược lại với việc tạo biểu mẫu từ đầu, hãy lấy đoạn mã này từ bootsnipp

Đây là biểu mẫu tải lên tuyệt đẹp của chúng tôi để làm việc với

Tải lên một tệp React

Hãy bắt đầu với một cái đơn giản, một tệp tải lên

Chụp tập tin đã chọn

Thêm trình xử lý thay đổi vào to

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

7 chọn tệp khi thay đổi

 <input type="file" name="file" onChange={this.onChangeHandler}/>

Nhật ký

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

8, nó là một mảng của tất cả các tệp được lưu trữ.

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

9giữ tệp thực tế và thông tin chi tiết của nó

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

Khi lưu, ứng dụng tạo phản ứng sẽ ngay lập tức làm mới trình duyệt

Lưu trữ tệp ở trạng thái và chỉ tải lên khi người dùng nhấp vào nút tải lên

Ban đầu, trạng thái

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

0 được đặt thành null

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

Để chuyển tệp sang trạng thái, hãy đặt trạng thái

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

0 thành

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

2

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

Kiểm tra lại biến trạng thái bằng react-devtools để xác minh

Một lần nữa, ứng dụng tạo phản ứng sẽ ngay lập tức làm mới trình duyệt và bạn sẽ thấy kết quả

Gửi tệp đến máy chủ

Chúng tôi có trạng thái tệp để tải lên

Chúng tôi chắc chắn cần một nút tải lên, tải lên được xử lý bằng trình xử lý sự kiện

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

3

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

4 sẽ thực thi

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

5 gửi yêu cầu đến máy chủ. Tệp từ một trạng thái được nối dưới dạng tệp vào FormData

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

5

Chúng tôi sẽ sử dụng

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

6 để gửi yêu cầu AJAX

Cài đặt và nhập

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

6

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

8

Tạo đối tượng biểu mẫu và tạo yêu cầu

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

8 với

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

6. Nó cần URL điểm cuối và dữ liệu biểu mẫu

 <input type="file" name="file" onChange={this.onChangeHandler}/>

1

Đây là trận chung kết,

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

50 với yêu cầu

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

6

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

8. Nó gửi yêu cầu

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

8 đến

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

54 và nhận được phản hồi

 <input type="file" name="file" onChange={this.onChangeHandler}/>

7____28

Loại tệp đính kèm được đặt làm trạng thái và cần được kiểm tra. Kết quả là, đó là một tệp nhị phân

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

55 sẽ gửi yêu cầu đến điểm cuối bằng tệp nhị phân trong Dữ liệu biểu mẫu

Để nhận tệp đã tải lên, hãy triển khai máy chủ phụ trợ. Nó sẽ nhận file gửi từ front-end

Tạo một máy chủ đơn giản với Node

Tạo tệp

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

56 trong thư mục gốc

Cài đặt

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

57,

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

58 và

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

59

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

0

Chúng tôi sẽ sử dụng express để tạo một máy chủ,

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

58 để xử lý các tệp. Cors sẽ được sử dụng để kích hoạt yêu cầu nguồn gốc chéo tới máy chủ này.

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

81 để theo dõi các thay đổi và tự động tải lại, đây là tùy chọn và bạn sẽ phải khởi động lại máy chủ theo cách thủ công khi không có

Trong,______156 bắt đầu một phiên bản cấp tốc

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

1

Đừng quên phần mềm trung gian CORS

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

2

Tạo một phiên bản

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

58 và đặt thư mục đích. Mã bên dưới sử dụng/thư mục chung. Bạn cũng có thể gán tên tệp mới khi tải lên. Mã bên dưới sử dụng

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

84 làm tên tệp

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

3

Tạo một phiên bản tải lên và nhận một tệp duy nhất

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

4

Thiết lập

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

8tuyến đường để tải tệp lên

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

5

Bắt đầu một đối tượng tải lên và xử lý lỗi, kiểm tra lỗi ______158 trước các lỗi chung. Trạng thái OK (200) với siêu dữ liệu được gửi lại cho khách hàng khi tải lên thành công

Làm cho máy chủ lắng nghe trên cổng 8000

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

6

Chạy

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

87 trong một thiết bị đầu cuối để khởi động máy chủ này

Tải lên một tệp, bạn sẽ thấy tệp xuất hiện trong thư mục chung

Nó đang hoạt động, xin chúc mừng

Tải lên nhiều tệp trong React

Đã đến lúc tải lên nhiều tệp cùng một lúc

Thêm

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

88 vào trường nhập liệu để chấp nhận nhiều tệp trong biểu mẫu

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

7

Cập nhật và

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

89 xóa các chỉ mục bằng 0, đó chỉ là sự kiện. Mục tiêu. các tập tin

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

8

Ngoài ra, hãy cập nhật function

 <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>

5 để lặp qua các tệp đính kèm

onChangeHandler=event=>{

    console.log(event.target.files[0])

}

9

Trong phiên bản tải lên của bản cập nhật

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

56 để chấp nhận một loạt tệp

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

0

Tải lại máy chủ và tải lên nhiều tệp lần này

Là nó làm việc cho bạn là tốt?

Xác nhận xử lý

Cho đến thời điểm hiện tại, chưa có sự cố nào xảy ra nhưng không có nghĩa là sẽ không bao giờ xảy ra

Dưới đây là những tình huống mà ứng dụng này có thể bị sập

Quá nhiều hình ảnh để tải lên
Tải lên hình ảnh có phần mở rộng tệp sai
Gửi một tệp hình ảnh quá lớn

Xác thực phía máy khách không bảo mật ứng dụng nhưng có thể gửi lỗi sớm cho người dùng và cải thiện trải nghiệm người dùng

#1 Có quá nhiều tệp

Tạo một hàm riêng có tên là

 <input type="file" name="file" onChange={this.onChangeHandler}/>

12 và truyền đối tượng sự kiện

Sử dụng độ dài để kiểm tra một số tệp đính kèm. Đoạn mã dưới đây trả về false khi số lượng tệp đạt đến 3

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

1

Cập nhật

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

89 để chỉ đặt trạng thái khi maxSelectFile trả về, tức là khi số lượng tệp nhỏ hơn 3

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

2

Kết quả

#2 Tải lên hình ảnh có phần mở rộng tệp sai

Tạo một hàm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

14 và truyền một đối tượng sự kiện

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

3

Cập nhật lại

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

89 để bao gồm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

14

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

4

Xem lại đầu ra

#3 Tải lên hình ảnh quá lớn

Tạo một hàm khác

 <input type="file" name="file" onChange={this.onChangeHandler}/>

17 để kiểm tra kích thước tệp. Xác định kích thước giới hạn của bạn và trả về false nếu kích thước tệp tải lên lớn hơn

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

5

Cập nhật lại

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

89 để xử lý

 <input type="file" name="file" onChange={this.onChangeHandler}/>

17

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

6

Đầu ra sau đó…

Đó là tất cả về xác thực phía máy khách

Cải thiện UX với thanh tiến trình và Toastify

Để người dùng biết điều gì đang xảy ra sẽ tốt hơn nhiều so với việc họ nhìn chằm chằm vào màn hình cho đến khi quá trình tải lên hoàn tất

Để cải thiện trải nghiệm người dùng, chúng tôi có thể chèn thanh tiến trình và thông báo bật lên

Thanh tiến trình

Sử dụng biến trạng thái

 <input type="file" name="file" onChange={this.onChangeHandler}/>

70 để cập nhật giá trị thời gian thực.
Cập nhật trạng thái, thêm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

71

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

7

Trạng thái đã tải được thay đổi từ ProgressEvent của yêu cầu POST

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

8

Đối với thanh tiến trình, chúng tôi sử dụng reactstrap

Cài đặt và nhập thanh tiến trình từ Reacstrap

constructor(props) {
    super(props);
      this.state = {
        selectedFile: null
      }
   
  }

9

Thêm thanh tiến trình sau bộ chọn tệp

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

0

Xem kết quả trong hành động

Đẹp, phải không?

Hiển thị thông báo kết quả với toastify

Cài đặt

 <input type="file" name="file" onChange={this.onChangeHandler}/>

72 và nhập nội dung sau

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

1

Đặt container ở đâu đó

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

2

Sử dụng bánh mì nướng bất cứ nơi nào bạn muốn hiển thị một tin nhắn

Trước hết, đặt kết quả tải lên

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

3

Xem kết quả

Ngoài ra, đặt kết quả xác thực

Cập nhật hàm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

14 để xác thực

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

4

Bạn có kết quả

Ngoài ra, thêm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

74

Bao gồm các thay đổi của

 <input type="file" name="file" onChange={this.onChangeHandler}/>

17and từ hàm

 <input type="file" name="file" onChange={this.onChangeHandler}/>

14

 onChangeHandler=event=>{
    this.setState({
      selectedFile: event.target.files[0],
      loaded: 0,
    })
  }

5

Thay đổi biến err thành mảng và vòng lặp để tạo thông báo bánh mì nướng từ nó

Tải lên tệp phản ứng của chúng tôi đang hoạt động tốt, nhưng chúng tôi có thể có nhiều cải tiến như tải lên nhà cung cấp đám mây, đồng thời sử dụng plugin của bên thứ ba cho các dịch vụ khác để cải thiện trải nghiệm tải lên là một số bổ sung khả thi

Trước khi chúng tôi kết thúc hướng dẫn này, bạn có thể đóng góp để cải thiện và cấu trúc lại mã từ hướng dẫn này, gửi PR của bạn đến kho lưu trữ này

programming nodejs