Paradox
1 سال پیش توسط Paradox مطرح شد
1 پاسخ

آپلود فایل در livewire

سلام وقت بخیر
توی livewire برای سیستم چت قابلیت ارسال ویس رو میخوام داشته باشم کدهای زیر از طریق لایووایر نیست ولی ویس ضبط میکنه ، و مشکلی که هست اسم فایل ویس توی دیتابیس دخیره نمیشه و خود ویس هم توی پوشه مورد نظر ارسال نمیشه

کدهای من

   <form wire:submit.prevent="SendMessage" enctype="multipart/form-data">
                        @csrf
                        <div class="d-flex">

                            <button type="submit" class="border-0 mt-2 me-3 fs-5 send-msg-button">
                                <i class="fa fa-paper-plane" aria-hidden="true"></i>
                            </button>
                            <input wire:model="body" type="text" class="form-control send-msg-input"
                                placeholder="پیام خود را بنویسید ...">

   <div>
                                <button class="record-button border-0 mt-2 ms-3 fs-5" id="recordButton"
                                    onclick="toggleRecording()">
                                    <i class="fa fa-microphone"></i>
                                </button>
                                <button class="record-button border-0 mt-2 ms-3 fs-5" id="stopButton"
                                    onclick="stopRecording()">
                                    <i class="fa fa-stop"></i>
                                </button>
                            </div>

                            <div>
                                <audio id="recordedAudio" controls></audio>
                                <button id="sendButton" class="border-0" onclick="sendAudio()">ارسال</button>
                            </div>
 </div>
                    </form>

script

    <script src="https://www.WebRTC-Experiment.com/RecordRTC.js"></script>

@push('scripts')
    <script>
        var recorder;
        var audioBlob;

        function toggleRecording() {
            var recordButton = document.getElementById('recordButton');
            var stopButton = document.getElementById('stopButton');

            if (recorder && recorder.state === 'recording') {
                recorder.stopRecording();
                stopButton.disabled = true;
                recordButton.disabled = false;
            } else {
                navigator.mediaDevices.getUserMedia({
                        audio: true
                    })
                    .then(function(stream) {
                        recorder = RecordRTC(stream, {
                            type: 'audio'
                        });
                        recorder.startRecording();
                        stopButton.disabled = true;
                        recordButton.disabled = true;
                    })
                    .catch(function(error) {
                        console.error('Could not get user media: ', error);
                    });
            }
        }

        function stopRecording() {
            var recordedAudio = document.getElementById('recordedAudio');
            var sendButton = document.getElementById('sendButton');

            recorder.stopRecording(function() {
                audioBlob = recorder.getBlob();
                recordedAudio.src = URL.createObjectURL(audioBlob);
                recordedAudio.play();
                stopButton.disabled = true;
                recordButton.disabled = false;
                sendButton.disabled = false;
            });
        }

        function sendAudio() {
            let formData = new FormData();
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
            formData.append('audioFile', audioBlob);

            let xhr = new XMLHttpRequest();
            xhr.open('POST', 'http://localhost:8000/chat/send', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send(formData);
        }
    </script>
@endpush

الان ویس ضبط میشه ولی ارسال نمیشه

   public function SendMessage(Request $request)
    {

        if ($this->body == null && $this->recordingFile == null) {
            return null;
        }

        $messageBody = $this->body;
        $voicePath = null;

        if ($this->recordingFile) {
            $voicePath = $this->recordingFile->store('uploads', 'uploads');
            $messageBody = '';
        }

        $this->createdMessage = Message::create([
            'conversation_id' => $this->selectedConversation->id,
            'sender_id' => auth()->id(),
            'receiver_id' => $this->receiverInstance->id,
            'body' => $messageBody,
            'voice' => $voicePath,
        ]);

        $voiceUrl = Storage::url($voicePath);

        $this->selectedConversation->last_time_message = $this->createdMessage->created_at;
        $this->selectedConversation->save();
        $this->emitTo('chat.chatbox', 'pushMessage', $this->createdMessage->id);
        $this->emitTo('chat.chat-list', 'refresh');
        $this->reset('body');
        $this->emitSelf('dispatchMessageSent');
    }

لطفا دوستانی که livewire کار کردن راهنمایی کنن
خیلی روش کار کردم و روش های مختلف تست کردم ولی موفق نشدم
این اخرین خروجی شد ویس ضبط میشه ولی ارسال نمیشه
کسی هست میتونه راهنمایی کنه ؟


ثبت پرسش جدید
Paradox
تخصص : در حال یادگیری
@paradox 1 سال پیش آپدیت شد
0

کسی هست راهنمایی کنه ؟
هرچی روش کار میکنم نتیجه نمیگیرم 😥

به این شکل هم جواب نگرفتم
script

   var recorder;
        var audioBlob;

        function toggleRecording() {
            var recordButton = document.getElementById('recordButton');
            var stopButton = document.getElementById('stopButton');

            if (recorder && recorder.state === 'recording') {
                recorder.stopRecording();
                stopButton.disabled = true;
                recordButton.disabled = false;
            } else {
                navigator.mediaDevices.getUserMedia({
                        audio: true
                    })
                    .then(function(stream) {
                        recorder = RecordRTC(stream, {
                            type: 'audio'
                        });
                        recorder.startRecording();
                        stopButton.disabled = true;
                        recordButton.disabled = true;
                    })
                    .catch(function(error) {
                        console.error('Could not get user media: ', error);
                    });
            }
        }

        function stopRecording() {
            var recordedAudio = document.getElementById('recordedAudio');
            var sendButton = document.getElementById('sendButton');

            recorder.stopRecording(function() {
                audioBlob = recorder.getBlob();
                recordedAudio.src = URL.createObjectURL(audioBlob);
                recordedAudio.play();
                stopButton.disabled = true;
                recordButton.disabled = false;
                sendButton.disabled = false;
            });
        }

        function sendAudio() {
            let formData = new FormData();
            formData.append('_token', document.querySelector('meta[name="csrf-token"]').content);
            formData.append('audioFile', audioBlob);

            let xhr = new XMLHttpRequest();
            xhr.open('POST', '{{ route('chat') }}', true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            };
            xhr.send(formData);
        }

component

    $audioPath = null;
        if ($request->hasFile('audioFile')) {
            $audioFile = $request->file('audioFile');
            $audioPath = $audioFile->store('uploads', 'public');
        }

        $this->createdMessage = Message::create([
            'conversation_id' => $this->selectedConversation->id,
            'sender_id' => auth()->id(),
            'receiver_id' => $this->receiverInstance->id,
            'body' => $this->body,
            'audio_path' => $audioPath,
        ]);

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام