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