现在我们有1个这样的需求，我们需要上传我们指定的文件格式信息。
通过element ui upload 组件进行上传。但是我们知道上传的格式有官方的指定格式。
也有一些特殊的时候我们需要我们自己的格式。
例如：我们上传我们自己拉去的微信信息组合后缀文件 WXUSer.WXDB
或者 数据库 bat .bat 文件 以及mac 文件 .mc
固有的，就不能满足我们的需求，咋办了。
我们可以指定上传文件格式来满足。
例如：
<!-- mac上传 -->
<el-popover placement="bottom-start" width="450" trigger="click">
<div style="height:300px;">
<el-upload
class="u_img"
:action="Uploadbmac"
:headers="Myhead"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:before-upload ="beforeUpload"
multiple
:limit="1"
:on-exceed="handleExceed"
:file-list="fileList"
accept=".txt,.mc"
>
<el-button type="primary">mac上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传txt,mc格式文件，且不超过500kb</div>
</el-upload>
</div>
<el-button type="primary" slot="reference">mac上传</el-button>
</el-popover>
<!-- mac上传 -->
methods: {
// 新增 / 修改书目
addOrUpdateBiBli(id) {
this.addOrUpdateVisible = true;
this.$nextTick(() => {
this.$refs.addOrUpdate.init(id);
});
},
DownLoadModel() {
this.$http({
url: this.$http.adornUrl("/pub/global"),
method: "get",
}).then(({
data }) => {
if (data && data.code === 0) {
this.DownLoadUrl = data.data.bibliTemplate;
window.open(this.DownLoadUrl);
}
});
},
getCheckDataList() {
// console.log(this.ShowName);
this.getDataList();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 1 个文件，本次选择了 ${
files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件,请先清空已经上传的文件,再次进行上传.不会影响已经上传成功的文件`
);
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${
file.name}？`);
},
beforeUpload(file, fileList){
var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
const extension = testmsg === 'txt'
},
}
我们在 accept=".txt,.mc" 中 指定我们需要的官方格式以及自己想要的格式以最简单的方式进行解决复杂的问题。
我们可以看到，现在我们的文件就会自动过滤我们需要选择的文件的格式。