Input標簽文件上傳，使用詳解

1、html添加標簽按鈕

<button ion-button (click)="selectVideo()">添加</button>
<input id="uploadPic" type="file"  (change)="handleVideo($event)"/>

解釋：button作用，用來美化input上傳n按鈕。同時設置Input 標簽 display:none;隱藏input。

2、觸發uInput 標簽的文件上傳事件

public selectVideo(){
    document.getElementById('uploadPic').click();
}
public handleVideo(e:any){
  let url = e.target.value;
}

解釋：其中，方法selectVideo用於觸發Input被點擊，用於選擇文件。handleVideo方法在選擇的文件改變后觸發，其中$event包含已選擇文件的所有文件信息。

3、$event文件對象常用屬性、方法解析：

（1）單文件上傳文件信息

Event{
    target:{
        baseURI:"http://localhost:8100/#/addCourse/t/course",
        files:[
        {
            name:"wps-office_10.1.0.5707_a21_amd64.deb",
            size:88085156,
            type:"application/vnd.debian.binary-package"
        }],
        value:"C:\fakepath\wps-office_10.1.0.5707_a21_amd64.deb"
    }
}                

（2）多文件上傳文件信息

Event{
    target:{
        baseURI:"http://localhost:8100/#/addCourse/t/course",
        files:[
        {
            name:"wps-office_10.1.0.5707_a21_amd64.deb",
            size:88085156,
            type:"application/vnd.debian.binary-package"
        }, {
            name:"wpasssss.deb",
            size:3333333,
            type:"application/vnd.debian.binary-package"
        }],
        value:"C:\fakepath\wps-office_10.1.0.5707_a21_amd64.deb"
    }
}  

 

 

解釋：瀏覽器url：event.target.baseURI;

　　　文件名稱：event.target.files[0].name;

　　　文件大小：event.target.files[0[.size;

　　　文件類型：event.target.files[0].type;

　　　文件路徑：event.target.value;

注：對於帶有multiple屬性的多文件上傳，event.target.files會變成包含多個文件信息的數組。

4、一般文件上傳有三中方法：

（1）filen對象格式傳遞給后台。

（2）formdata文件格式n上傳給后台。

（3）對於圖片上傳，也可以傳遞base64URln編碼格式傳遞給后台。

具體使用哪種方法依據具體n情況而定。