这份文档还在翻译中，预期年底前完成。欢迎您提供宝贵的意见及建议。

Send and Receive Images

Overview

This guide covers sending and receiving images within a conversation.

Before you begin, make sure you added the SDK to your app and you are able to create a conversation.

NOTE: A step-by-step tutorial to build a chat application is available here.

This guide will make use of the following concepts:

Conversation Events - image events that fire on a Conversation, after you are a Member

Send an Image

Given a conversation you are already a member of:

const fileInput = document.getElementById('fileInput');
conversation.sendImage(fileInput.files[0]).then((imageRequest) => {
  ...
}).catch(errorLogger)

conversation.sendAttachment(imageFile, object : NexmoRequestListener<Void> {
    override fun onSuccess(p0: Void?) {
        Log.d("TAG", "Image sent")
    }

    override fun onError(apiError: NexmoApiError) {
        Log.d("TAG", "Error: Image not sent ${apiError.message}")
    }
})

conversation.sendAttachment(imageFile, new NexmoRequestListener<Void>() {
    public void onSuccess(@Nullable Void p0) {
        Log.d("TAG", "Image sent");
    }

    public void onError(@NotNull NexmoApiError apiError) {
        Log.d("TAG", "Error: Image not sent " + apiError.getMessage());
    }
});

let image = UIImage(named: "file.png")
guard let imageData = image?.pngData() else { return }

conversation.sendAttachment(with: NXMAttachmentType.image,
                            name: "File name",
                            data: imageData,
                            completionHandler: { (error) in
    if let error = error {
        NSLog("Error sending image: \(error.localizedDescription)")
        return
    }
    NSLog("Image sent")
})

[conversation sendAttachmentWithType:NXMAttachmentTypeImage 
                                name:@"File name"
                                data:[NSData dataWithContentsOfFile:@"file.png"]
                   completionHandler:^(NSError * _Nullable error) {
    NSLog(@"Image sent");
}];

Receive an Image

A image conversation event will be received when a member sends an image to a conversation:

conversation.on('image', (sender, event) => {
  console.log('*** Image received', sender, event);
});

private val messageListener = object : NexmoMessageEventListener {
    override fun onTypingEvent(typingEvent: NexmoTypingEvent) {}

    override fun onAttachmentEvent(attachmentEvent: NexmoAttachmentEvent) {
        val userName = attachmentEvent.fromMember.user.name

        Log.d("TAG", "Image event received. User $userName")

        // Event contains URL's for multiple sizes of images
        attachmentEvent.original.url
        attachmentEvent.medium.url
        attachmentEvent.thumbnail.url

        //Download the image using one of open-source libraries: Coil, Picasso, Glide, etc.
    }

    override fun onTextEvent(textEvent: NexmoTextEvent) {}

    override fun onSeenReceipt(seenEvent: NexmoSeenEvent) {}

    override fun onEventDeleted(deletedEvent: NexmoDeletedEvent) {}

    override fun onDeliveredReceipt(deliveredEvent: NexmoDeliveredEvent) {}
}

conversation?.addMessageEventListener(messageListener)

private NexmoMessageEventListener messageListener = new NexmoMessageEventListener() {
    @Override
    public void onTextEvent(@NonNull NexmoTextEvent textEvent) {}

    @Override
    public void onAttachmentEvent(@NonNull NexmoAttachmentEvent attachmentEvent) {
        String userName = attachmentEvent.getFromMember().getUser().getName();

        Log.d("TAG", "Image event received. User " +  userName);

        // Event contains URL's for multiple sizes of images
        attachmentEvent.getOriginal().getUrl();
        attachmentEvent.getMedium().getUrl();
        attachmentEvent.getThumbnail().getUrl();

        //Download the image using one of open-source libraries: Coil, Picasso, Glide, etc.
    }

    @Override
    public void onEventDeleted(@NonNull NexmoDeletedEvent deletedEvent) {}

    @Override
    public void onSeenReceipt(@NonNull NexmoSeenEvent seenEvent) {}

    @Override
    public void onDeliveredReceipt(@NonNull NexmoDeliveredEvent deliveredEvent) {}

    @Override
    public void onTypingEvent(@NonNull NexmoTypingEvent typingEvent) {}
};

conversation.addMessageEventListener(messageListener);

Add NXMConversationDelegate as an extension to a ViewController or similar, and implement conversation(_ conversation: NXMConversation, didReceive event: NXMImageEvent):

Note: The first method below is required when implementing NXMConversationDelegate:

extension ViewController: NXMConversationDelegate {
    func conversation(_ conversation: NXMConversation, didReceive error: Error) {
        NSLog("Conversation error: \(error.localizedDescription)")
    }
    func conversation(_ conversation: NXMConversation, didReceive event: NXMImageEvent) {
        NSLog("Received image event: \(event.originalImage)")
    }
}

Have a ViewController, or similar, conform to NXMConversationDelegate and implement conversation:didReceiveImageEvent::

Note: The first method below is required when implementing NXMConversationDelegate:

- (void)conversation:(NXMConversation *)conversation didReceive:(NSError *)error {
    NSLog(@"Conversation error: %@", error.localizedDescription);
}
- (void)conversation:(NXMConversation *)conversation didReceiveImageEvent:(NXMImageEvent *)event {
    NSLog(@"Received image event: %@", event.originalImage);
}

Reference

Improve this page