html5 input获取文件内容,上传文件

<label for="pop_audio" id="label1">
	<input
		style="display:none;"
		id="pop_audio"
		type="file"
		multiple
		@change="selectFile($event)"
	/>
	<div>选择文件</div>
</label>

1.获取file内容(可直接配置src回显预览)

let files = [];//附件
const selectFile = event => {
	for (let i = 0; i < event.target.files.length; i++) {
        // 获取input上传附件
	    let file = event.target.files[i];
        files.push(file )
    
        //获取上传附件路径,返回值也是一个blob对象
	    let src = getFileURL(file);
        console.log(src );
    
        // 获取base64字符串
        let base64 = null;
	    let reader = new FileReader();
	    reader.readAsDataURL(file);
	    reader.onload = function(e) {
		base64 = e.target.result;
        console.log(base64);
	};
    }
};

 //获取上传附件本地路径
const getFileURL = file => {
   var getUrl = null;
    if (window.createObjectURL != undefined) {
        // basic
        getUrl = window.createObjectURL(file);
    } else if (window.URL != undefined) {
        // mozilla(firefox)
        getUrl = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) {
        // webkit or chrome
        getUrl = window.webkitURL.createObjectURL(file);
    }
    return getUrl;
};

2.上传inputfile的内容

// 创建表单对象
var form = new FormData();
for(let i=0;i<videos.value.length;i++){
    //将文件放到表单对象中,一个key值可以对应多个value值
	form.append('file', videos.value[i]);
}
			
let url = `${FILE_UPLOAD}`;
// 用axios上传即可
post(url, form)
    .then(res => {	
         console.log(res);		
    }).catch(err => {
	    console.log(err);
	});


版权声明:本文为Lycoris_Red原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。