uniapp realisiert die Aufnahme-Upload-Funktion

uniapp realisiert die Aufnahme-Upload-Funktion

uni-app Einführung

uni-app ist ein Front-End-Framework zur Entwicklung plattformübergreifender Anwendungen mit Vue.js.
Entwickler schreiben Vue.js-Code und uni-app kompiliert ihn für mehrere Plattformen wie iOS, Android und WeChat-Applets, um sicherzustellen, dass er korrekt ausgeführt wird und ein hervorragendes Erlebnis bietet.

HTML-Teil

Ich habe ein Aufnahmebild geschrieben, bei dem beim Klicken eine Popup-Ebene angezeigt wird (im Stil von QQ).

Bildbeschreibung hier einfügen

Ich werde nicht näher auf den Schreibstil eingehen, den kennt jeder.

Bildbeschreibung hier einfügen

js-Teil

Das ist der springende Punkt!!!

Bildbeschreibung hier einfügen

Erstellen einer Instanz

Um das Gesamtbild zu erhalten, können Sie die Aufnahme jederzeit starten und stoppen. Ich habe es in das Gesamtbild eingefügt.

const recorderManager = uni.getRecorderManager();//Eine Aufnahmeinstanz erstellen const innerAudioContext = uni.createInnerAudioContext();//Instanz, die für die Wiedergabe verwendet wird // Um ​​zu verhindern, dass das iPhone stummgeschaltet wird und nicht abgespielt werden kann uni.setInnerAudioOption({
		obeyMuteSwitch: false
	})
	innerAudioContext.autoplay = true;
	Standard exportieren {

Aufnahme starten

this.timecount = '00:00:00'; //Aufnahmezeit initialisieren this.hour = 0;
diese.Minute = 0;
diese.Sekunde = 0;
this.getTimeIntervalplus(); //Einen Timer einkapseln, aufrufen um die Zeitmessung zu starten const options = { //Parameter Dauer: 600000,
	Beispielrate: 44100,
	Anzahl der Kanäle: 1,
	encodeBitRate: 192000,
	Format: 'mp3',
	Rahmengröße: 50
}
recorderManager.start(Optionen); 

Bildbeschreibung hier einfügen

Aufzeichnung beenden

Ob Sie die Mindestdauer begrenzen müssen, können Sie selbst entscheiden. Ich habe es hier nicht geschrieben.

recorderManager.stop(); //Aufnahme beenden clearInterval(this.timer); //Zeitmessung beenden

Aufnahme abspielen

innerAudioContext.src = this.voicePath; //Wiedergabeadresse (lokale Adresse, die oben aufgezeichnet wurde)
innerAudioContext.play();//abspielen

Wiedergabe pausieren

innerAudioContext.pause();//Wiedergabe pausieren clearInterval(this.timer);//Timer löschen

Aufnahmen an das Backend übermitteln

//Aufnahme beenden und Aufnahme übermitteln submitrecord: function() {
	this.count += 1; //Dies definiert eine globale Variable, um mehrere Übermittlungen zu verhindern, if (this.count == 1){
		Konsole.log(dieser.Anzahl);
		var https = getApp().globalData.https;
		wenn (diese.aufgezeichneteNummer == 2) {
		diese.aufgezeichneteNummer = 3;
		recorderManager.stop();
		: ClearInterval(dieser.Timer);
	}
	wenn (dieser.voicePath != '') {
		Konsole.log(dieser.voicePath);
		uni.uploadFile({
			URL: https + 'Uploads/uploadVoiceVideo',
			Dateipfad: dieser.Sprachpfad,
			Name: "Datei",
			Erfolg: (res) => {
			dies.Anzahl = 0;
			//Initialisierung this.initialize()//Ich habe eine Funktion zum Initialisieren des Timers gekapselt this.timer = this.timecount;
			diese.show_recording = falsch;
			var Daten = JSON.parse(res.data);
			if (this.current == 0) {//Beurteilen, in welcher Spalte der Ton aufgezeichnet ist, und wieder einfügen this.firsvideo.push(data.address);
				} sonst wenn (dieser.aktuell == 1) {
					this.secovideo.push(Daten.Adresse);
					Konsole.log(dieses.secovideo);
				} sonst wenn (dieser.aktuell == 2) {
					this.thrivideo.push(Daten.Adresse);
				}
				uni.showToast({
						Titel: „Übermittlung erfolgreich!“,
						Symbol: „keine“,
						Dauer: 1200
				})
			},
			fehlgeschlagen: (Fehler) => {
				uni.hideLoading();
				uni.showToast({
					Titel: „Hochladen fehlgeschlagen~“,
					Symbol: „keine“,
					Dauer: 1200
				})
					zurückkehren
				}
			});
		} anders {
			console.log("Aufzeichnung fehlgeschlagen")
			uni.showToast({
				Titel: 'Aufnahme fehlgeschlagen',
				Symbol: „keine“,
				Dauer: 1200
			})
			uni.hideLoading();
			diese.show_recording = falsch;
			dies.checkPermission()
			dies.rerecord()
		}
	} anders {
		uni.showToast({
			Titel: 'Bitte nicht mehrfach absenden',
			Symbol: „keine“,
			Dauer: 2000
		})
	dies.Anzahl=0;
	}
},

Neuaufnahme

//Neu aufzeichnen neu aufzeichnen: function() {
				//Initialisiere den Timer this.initialize()
				this.getTimeIntervalplus();//Zeitmessung starten const options = {
					Dauer: 600000,
					Beispielrate: 44100,
					Anzahl der Kanäle: 1,
					encodeBitRate: 192000,
					Format: 'mp3',
					Rahmengröße: 50
				}
				recorderManager.start(Optionen);//Aufnahme starten },

onLoad-Teil

beim Laden(Option) {
			var Terminnachricht = Option.Terminnachricht;
			Terminnachricht = JSON.parse(Terminnachricht);
			this.appointment_message = Terminnachricht;
			lass das = dies;
			recorderManager.onStop(Funktion(res) {
				console.log('Rekorder stoppen' + JSON.stringify(res));
				that.voiceDuration = res.duration;
				that.voicePath = res.tempFilePath;
				konsole.log(res);
			});
		},

Timer

// Timer-Inkrement getTimeIntervalplus() {
				: ClearInterval(dieser.Timer);
				dieser.timer = setzeInterval(() => {
					diese.Sekunde += 1;
					wenn (diese.Sekunde >= 60) {
						diese.minute += 1;
						diese.Sekunde = 0;
					}
					wenn (diese.Minute >= 10) {
						diese.aufgezeichneteNummer = 3;
						recorderManager.stop();
						: ClearInterval(dieser.Timer);
					}
					diese.Sekunde2 = diese.Sekunde;
					diese.Minute2 = diese.Minute;
					this.timecount = this.showNum(this.hour) + ":" + this.showNum(this.minute) + ":" + this
						.showNum(diese.Sekunde);

 - console.log("dieser.Zeitzähler", dieser.Zeitzähler)

				}, 1000);
			},

Abschnitt „Daten“

Daten() {
			zurückkehren {
				Aktion: 'https://yl.letter-song.top/api/Uploads/uploadPicture', //Bildadresse hochladen textareavalue: '', //Textbeschreibungswert fileList2: [], //Bildpfad 2 zurückgeben
				fileList3: [], //Gibt Bildpfad 3 zurück
				fileList: [], //Bildpfad 1 zurückgeben
				firsvideo: [], //Aufnahmepfad 1
				secovideo: [], //Aufnahmepfad 2
				thrivideo: [], //Aufnahmepfad 3
				appointment_message: '', //Termininformationen von der vorherigen Seite weitergegeben list: [{ //Name der Beschriftungstabelle: 'Frühere Symptome'
				}, {
					Name: „Neueste Symptome“
				}, {
					Name: 'Dieses Symptom',
				}],
				aktuell: 0, //ausgewähltes Element sty: { //Schiebereglerstilhöhe: '4px',
					Rahmenradius: '2rpx',
					borderTopLeftRadius: '10px',
					Hintergrundfarbe: '#3ECEB5'
				},
				activeItem: { //Ausgewählte Elementstilfarbe: '#333333',
					Schriftgröße: '600',
					Schriftgröße: '36rpx',
				},
				show_recording: false, //Aufnahme-Popup-Fenster aufrufen recordednum: 1, //1: Ausgangszustand 2. Aufnahmezustand 3 Ende voicePath: '', //Dieser Audio-Aufnahmepfad voiceDuration: '',
				Zeitzählung: '00:00:00',
				timecount2: "",
				Stunde: 0,
				Minute: 0,
				Sekunde: 0,
				Stunde2: 0,
				Minute2: 0,
				Sekunde2: 0,
				isZant: falsch,
				Timer: '',
				yuming: 'Dies ist der Domänenname',
				Permiss: 0, //0 bedeutet Aufnahmeerlaubnis aktivieren, 1 bedeutet Aufnahmeerlaubnis aktivieren,
				Anzahl: 0
			}
		},

Dies ist das Ende dieses Artikels über die Aufnahme-Upload-Funktion von Uniapp. Weitere relevante Inhalte zum Aufnahme-Upload von Uniapp finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der dynamischen Änderung des Elementknotenstils in Uniapp
  • Detaillierte Erklärung der schmerzlosen Token-Aktualisierungsmethode von Uniapp
  • So verwenden Sie MQTT im Uniapp-Projekt
  • Uniapps Erfahrung in der Entwicklung kleiner Programme
  • Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet
  • Uniapp WeChat-Applet: Lösung bei Schlüsselfehler

<<:  MySQL- und SQLYog-Installationstutorial mit Bildern und Text

>>:  Analyse des Prozesses zur Konfiguration des Alibaba Cloud-Proxy-Warehouses basierend auf Nexus

Artikel empfehlen

Kurze Analyse von CentOS 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Baidu Cloud-Festplatte: Link: https://pan.baidu.c...

js generiert dynamisch Tabellen (Knotenoperationen)

In diesem Artikelbeispiel wird der spezifische Co...

Node.js gibt je nach Anforderungspfad unterschiedliche Daten zurück.

Inhaltsverzeichnis 1. Lernen Sie, je nach Anforde...

Zusammenfassung einiger effizienter magischer Operatoren in JS

JavaScript veröffentlicht mittlerweile jedes Jahr...

Detaillierte Erklärung von mktemp, einem grundlegenden Linux-Befehl

mktemp Erstellen Sie auf sichere Weise temporäre ...

HTML Mehrere spezielle Trennlinieneffekte

1. Grundlinien 2. Spezialeffekte (die Effekte sin...

Lösung für Verbindungsfehler beim MySQL-Server 5.5

Die Lösung für das Problem, dass MySQL keine Verb...