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情况而定。

转载于:https://www.cnblogs.com/hsl-shiliang/p/9049964.html