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);
	});

  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值