Tải lên hình ảnh nodejs

Nút của Cloudinary. js SDK cung cấp các khả năng tải lên, chuyển đổi, tối ưu hóa và phân phối hình ảnh và video đơn giản nhưng toàn diện mà bạn có thể triển khai bằng cách sử dụng mã tích hợp liền mạch với Nút hiện tại của mình. ứng dụng js

Hướng dẫn này liên quan đến phiên bản mới nhất được phát hành của Cloudinary Node. thư viện js

Để biết chi tiết về tất cả các tính năng mới và bản sửa lỗi từ các phiên bản trước, hãy xem CHANGELOG

Hãy xem đoạn mã chuyển đổi sau đây và hình ảnh mà nó mang lại

Nút. js (đám mây 1. x)

cloudinary.image("front_face.png", {secure: true, transformation: [
  {width: 150, height: 150, gravity: "face", crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: "cloudinary_icon_blue", gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"},
  {angle: 10}
  ]})

Mã tương đối đơn giản này thực hiện tất cả những điều sau đây trên front_face ban đầu. jpg trước khi gửi nó

  • Cắt thành hình thu nhỏ 150x150 bằng trọng lực nhận diện khuôn mặt để tự động xác định vị trí cắt
  • Làm tròn các góc với bán kính 20 pixel
  • Áp dụng hiệu ứng nâu đỏ
  • Phủ logo Cloudinary lên góc đông nam của hình ảnh (với độ lệch nhẹ). Biểu trưng được thu nhỏ lại với chiều rộng 50 pixel, với độ sáng tăng lên và độ trong suốt một phần (độ mờ = 60%)
  • Xoay hình ảnh kết quả (bao gồm cả lớp phủ) 10 độ
  • Chuyển đổi và phân phối hình ảnh ở định dạng PNG (hình ảnh được tải lên ban đầu là JPG)

Và đây là URL sẽ được bao gồm trong thẻ hình ảnh được tạo tự động từ đoạn mã trên

Theo cách tương tự, bạn có thể chuyển đổi video

Tìm hiểu thêm về chuyển đổi

Nút sau. js tải video

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
9 lên thư mục con được chỉ định bằng cách sử dụng public_id,
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
0. Video sẽ ghi đè lên
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
0 video hiện có nếu nó tồn tại. Khi quá trình tải lên video hoàn tất, URL thông báo được chỉ định sẽ nhận được thông tin chi tiết về nội dung phương tiện đã tải lên

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));

Nút của Cloudinary. thư viện tích hợp js có sẵn dưới dạng NPM mã nguồn mở. Để cài đặt Cloudinary NPM, hãy chạy

Bao gồm nút của Cloudinary. js trong mã của bạn

var cloudinary = require('cloudinary');

nút. js SDK tải lên và các ví dụ về cú pháp phương thức quản trị được hiển thị trong tài liệu này sử dụng chữ ký v2. Để tránh nhầm lẫn, tất cả các ví dụ mã được hiển thị ở định dạng

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
2

Trong mã của riêng bạn, nên bao gồm

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
3 của Nút. js các lớp như sau

var cloudinary = require('cloudinary').v2;

Ngoài ra, từ trong một mô-đun, bạn có thể sử dụng câu lệnh nhập ES6

________số 8

Theo một trong hai điều này, các lệnh gọi API quản trị và tải lên của bạn phải bỏ qua

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
4 được hiển thị trong các ví dụ về mã của hướng dẫn này.
Ví dụ: tải lên một hình ảnh đơn giản.

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
0

Để sử dụng Nút đám mây. js, bạn phải định cấu hình ít nhất

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
5 của mình.
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
6 và
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
7 của bạn cũng cần thiết cho lệnh gọi API an toàn tới Cloudinary (e. g. , tải lên hình ảnh và video). Bạn có thể tìm thông tin đăng nhập cấu hình môi trường sản phẩm của mình trong trang Bảng điều khiển của Bảng điều khiển Cloudinary

Ngoài các tham số cấu hình bắt buộc, bạn có thể xác định một số tham số cấu hình tùy chọn nếu có liên quan

Việc đặt tham số cấu hình có thể được thực hiện trên toàn cầu, bằng cách sử dụng biến môi trường hoặc phương thức

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
8 hoặc lập trình trong mỗi lệnh gọi đến phương thức Cloudinary. Các tham số được đặt trong lệnh gọi phương thức Cloudinary sẽ ghi đè các tham số được đặt trên toàn cầu

Vì lý do tương thích ngược, giá trị mặc định của tham số cấu hình

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
9 tùy chọn là
var cloudinary = require('cloudinary');
0. Tuy nhiên, đối với hầu hết các ứng dụng hiện đại, bạn nên định cấu hình tham số
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
9 thành
var cloudinary = require('cloudinary');
2 để đảm bảo rằng các URL chuyển đổi của bạn luôn được tạo dưới dạng HTTPS

Bạn có thể định cấu hình

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
5,
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
6 và
cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
7 cần thiết bằng cách xác định biến môi trường CLOUDINARY_URL. Giá trị CLOUDINARY_URL có sẵn trong trang Bảng điều khiển của Bảng điều khiển Cloudinary. Khi sử dụng Cloudinary thông qua tiện ích bổ sung PaaS (e. g. , Heroku hoặc AppFog), biến môi trường này được xác định tự động trong môi trường triển khai của bạn. Ví dụ

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
2

Đặt các tham số bổ sung, chẳng hạn như upload_prefix và cname, cho biến môi trường

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
3

Đây là một ví dụ về cài đặt tham số cấu hình trên toàn cầu trong ứng dụng Nút của bạn

cloudinary.v2.uploader
.upload("dog.mp4", 
  {resource_type: "video", public_id: "myfolder/mysubfolder/my_dog",
  overwrite: true, notification_url: "https://mysite.example.com/notify_endpoint"})
.then(result=>console.log(result));
4

Khi sử dụng nút. js SDK, hãy ghi nhớ những nguyên tắc này

  • Tên tham số.
    var cloudinary = require('cloudinary');
    6. Ví dụ. public_id
  • Các lớp học.
    var cloudinary = require('cloudinary');
    7. Ví dụ. Tải trước tập tin
  • phương pháp.
    var cloudinary = require('cloudinary');
    6. Ví dụ. image_upload_tag
  • Truyền dữ liệu tham số dưới dạng.
    var cloudinary = require('cloudinary');
    9

Để biết thêm các mẫu mã hữu ích và tìm hiểu cách tích hợp Cloudinary với Nút của bạn. js, hãy xem Dự án mẫu của chúng tôi

Làm cách nào để tải lên hình ảnh bằng multer trong nodejs?

2. 1 Tạo một gói. tập tin json. Chạy npm init để tạo gói. tập tin json. npm init -y. .
2. 2 Cài đặt phụ thuộc và phụ thuộc nhà phát triển. npm tôi thể hiện sắc nét. Chúng tôi sẽ sử dụng express để thiết lập máy chủ của chúng tôi, multer để xử lý tệp tải lên và sắc nét để cắt hình ảnh theo kích thước mong muốn của chúng tôi. npm i -D gật đầu

Làm cách nào để tải lên tệp hình ảnh và hiển thị bằng cách sử dụng js nút nhanh?

Thiết lập máy chủ tệp json, sau đó cài đặt Express . Chúng tôi sẽ tạo một chỉ mục. js trong thư mục gốc của chúng tôi và chúng tôi sẽ sao chép ví dụ Express Hello world vào tệp này làm điểm bắt đầu. const express = require('express'); .

Làm cách nào để tải hình ảnh trong nodejs lên cloudinary?

Thiết lập và định cấu hình SDK. Cài đặt SDK. Đặt biến môi trường API của bạn. Định cấu hình đám mây
Tải lên một hình ảnh
Nhận và sử dụng các chi tiết của hình ảnh
Chuyển đổi hình ảnh
Chạy mã của bạn

Nodejs có tốt cho việc xử lý hình ảnh không?

Với tính năng xử lý hình ảnh, ứng dụng của bạn có thể thay đổi kích thước và nén tất cả hình ảnh do người dùng tải lên, điều này có thể cải thiện đáng kể hiệu suất ứng dụng của bạn và tiết kiệm dung lượng ổ đĩa máy chủ của bạn. Nút. js có một hệ sinh thái gồm các thư viện mà bạn có thể sử dụng để xử lý hình ảnh, chẳng hạn như mô-đun sharp, jimp và gm .