现在我们有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'
},
}
We specify the official format we need and the format we want in accept=".txt,.mc" to solve complex problems in the simplest way.
We can see that now our file will automatically filter the format of the file we need to select.