input タグはメディア ファイルをアップロードし、カメラまたはマイクを呼び出します。

ファイルのアップロード

1. プロジェクト開発において、ファイルをアップロードする必要がある場合は、input タグの type 属性値を file に設定します。

   <input type="file"/>
   

アップロードするファイルの種類

2. アップロードされるファイルの種類を制限する必要がある場合は、input タグの accept 属性を使用する必要があります。accept 属性: ファイルのアップロードを通じて送信されるファイルの種類を指定します。(のみtype="file")

属性値を受け入れる	説明
オーディオ/*	すべてのサウンド ファイルを受け入れる
ビデオ/*	すべてのビデオ ファイルを受け入れる
画像/*	すべての画像ファイルを受け入れる
MIME_type	パラメータのない有効な MIME タイプ

カメラまたはマイクを呼び出す

1. キャプチャ属性: デバイスの呼び出しに使用されるカメラまたはマイク

   • いつaccept="image/*"、accept="video/*"いつ:

     属性値をキャプチャする	説明
     ユーザー	携帯電話のフロントカメラ
     環境	携帯電話の背面カメラ

   • このときaccept="audio": マイクデバイスのみが呼び出され、キャプチャプロパティの値は任意の値になります。

   • 入力にキャプチャ属性がない場合、acccppt タイプに応じてフォルダー オプションとカメラまたはレコーダー オプションを指定します。

   • 入力に複数の属性が含まれている場合、フォルダーにアクセスするときに複数のファイルを確認できますが、システムのカメラまたはレコーダーでは単一のファイルのみが表示され、複数のファイルがない場合は単一のファイルのみが表示されます。

フロントカメラを使用してビデオを録画し、ビデオ Base64 を取得します

1. HTML部分

   <!-- 当input的值发生改变时，触发change事件，调用changeVideo函数 -->
   <input
     type="file"
     accept="video/*"
     capture="user"
     ref="videoFile"
     @change="changeVideo"
     class="file-input"
     hidden
   />
   

2. js部分

   changeVideo () {
         
         
   	// 获取到input标签的上传的文件对象
   	const files = this.$refs.videoFile.files;
   
   	// 通过FileReader构造函数创建一个新的FileReader对象
   	let reader = new FileReader();
   	
   	// 通过新创建的FileReader对象获取input元素上传的files文件对象，并使用readAsDataURL()方法读取
   	reader.readAsDataURL(file);
   
   	// 这是一个异步操作，当读取完成后，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容
   	reader.onload = () => {
         
         
   		// 输出文件base64
      		console.log(reader.result)
       }
   }
   

FileReader のいくつかのインスタンス メソッド

1. readAsArrayBuffer(): 指定された BLOB またはファイルのコンテンツを読み取り、読み取り操作が完了すると、loadend イベントをトリガーします。結果属性には、読み取りファイルのデータを表す ArrayBuffer オブジェクトが含まれます。
2. readAsBinaryString(): 指定された BLOB またはファイルのコンテンツを読み取り、読み取り操作が完了すると、loadend イベントをトリガーします。結果属性には、読み取りファイルの元のバイナリ形式が含まれます。
3. readAsDataURL(): 指定された BLOB またはファイルのコンテンツを読み取り、読み取り操作が完了すると、loadend イベントをトリガーします。結果属性には、読み取りファイルのコンテンツを表す data: URL 形式の Base64 文字列が含まれます。
4. 上記の 3 つのメソッド パラメーターは、読み取られる Blob または File オブジェクトです。