区别
原生样式
我们再做文件选择按钮，有时适用原生的
<input type="file" :action="uploadURL" ref="upload" style="width: 200px; height: 30px;" accept=".apk" id="appPush" @change="appSelect1()">
element样式
有时适用其他框架的，如element框架按钮
<el-button
slot="trigger"
size="small"
type="primary"
:on-change="importFile"
>
选取文件
</el-button>
所以我们再选择文件中，要注意两种方式不一样
方法
原生方法
原生的按钮使用，这个不用带参数：
importFile(){
var objFile = document.getElementById('fileid').files[0];//element框架不适用，仅用于原生js
}
importFile(){
var objFile = document.getElementById('fileid').files;//element框架不适用，仅用于原生js
}
element方法
element按钮使用,这个file是参数带过去的：
importFile(file){
var objFile = file.raw;
...略。。。
}
importFile(file, fileList){
var objFile = fileList;
...略。。。
}
两种不能混淆，其他框架你遇到的是怎么样的？请在评论区分享下。
案例
我们来完整的写个原生的案例，参考：blog.csdn.net/bbs11007/ar…
一、原生
html：
<input type="file" :action="uploadURL" ref="upload" style="width: 200px; height: 30px;" accept=".apk" id="appPush" @change="appSelect()">
js：
//选择文件按钮，判断是否是apk，注意不带参数
appSelect1(){
var objFile = document.getElementById('appPush').files[0];//获取文件内容对象
// var objFile = file.raw;//element框架使用
//这里原生和element一样
var objStr = /\.(apk)$/; //文件类型正则验证
if(!objStr.test(objFile.name)){
this.$alert('请选择正确的APK！', '警告', {
confirmButtonText: '确定',
});
return false;
}
this.appSelect();//调用读取APK的方法，注意不带参数
},
为啥要分开写？那是因为合在一起会出问题，可去试试
//读取APK的方法，注意不带参数
appSelect(){
let AppInfoParser = require('../../build/app-info-parser-master/dist/app-info-parser.js');//引用插件
const files = document.getElementById('appPush').files;//仅用在原生
// const files = file.raw;//element框架使用
console.log("aaa"+JSON.stringify(files))
const parser = new AppInfoParser(files[0]);//仅用在原生
// const parser = new AppInfoParser(files);//element框架使用
console.log("bbb"+ JSON.stringify(parser));
//原生和element一样
parser.parse().then(result => {
console.log('app info ----> ', result);
console.log('包名：', result.package);
console.log("图片路径:"+result.icon);
console.log("版本code:"+result.versionCode);
console.log("版本号:"+result.versionName);
console.log("应用名称:"+result.application.label);
console.log("APK文件名:"+parser.file.name);
console.log('appPush buffer ----> ', parser.file);//等同于files[0]
}).catch(err => {
this.$alert('无法获取apk信息，请检查！', '警告', {
confirmButtonText: '确定',
});
console.log('无法获取apk信息 ----> ', err)
})
},
一、element按钮
html：
<el-upload
class="upload-demo"
ref="upload"
:auto-upload="false"
:action="uploadURL"
:on-change="appSelect1"
>
<el-button size="small" type="primary" >选取文件</el-button>
</el-upload>
js：
//选择文件按钮，判断是否是apk，注意 带参数
appSelect1(file,fileList){
// var objFile = document.getElementById('appPush').files[0];//获取文件内容对象
var objFile = file.raw;//element框架使用
//这里原生和element一样
var objStr = /\.(apk)$/; //文件类型正则验证
if(!objStr.test(objFile.name)){
this.$alert('请选择正确的APK！', '警告', {
confirmButtonText: '确定',
});
return false;
}
this.appSelect(file,fileList);//调用读取APK的方法，注意带参数
},
//读取APK的方法，注意不带参数
appSelect(file,fileList){
let AppInfoParser = require('../../build/app-info-parser-master/dist/app-info-parser.js');//引用插件
// const files = document.getElementById('appPush').files;//仅用在原生
const files = file.raw;//element框架使用
console.log("aaa"+JSON.stringify(files))
// const parser = new AppInfoParser(files[0]);//仅用在原生
const parser = new AppInfoParser(files);//element框架使用
console.log("bbb"+ JSON.stringify(parser));
//原生和element一样
parser.parse().then(result => {
console.log('app info ----> ', result);
console.log('包名：', result.package);
console.log("图片路径:"+result.icon);
console.log("版本code:"+result.versionCode);
console.log("版本号:"+result.versionName);
console.log("应用名称:"+result.application.label);
console.log("APK文件名:"+parser.file.name);
console.log('appPush buffer ----> ', parser.file);//等同于files[0]
}).catch(err => {
this.$alert('无法获取apk信息，请检查！', '警告', {
confirmButtonText: '确定',
});
console.log('无法获取apk信息 ----> ', err)
})
},
