element upload before-upload 不起作用原因:设置了auto-upload为false
before-upload: 文件上传之前触发,指当文件已经被选中,提交时才会触发此事件
auto-upload:设置为false时,选中文件不会触发上传事件
所以,before-upload设置后不起作用。
解决方法:将before-upload里面要写的内容放到on-change事件中去实现-------或是评论中的将:auto-upload="false"设置为true
-
template:
<el-upload class="upload" ref="upload" action="string" :file-list="fileList" :auto-upload="false" :http-request="uploadFile" :on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove" multiple="multiple" accept=".dtmiro-project" > <el-button slot="trigger" size="small" type="primary" @click="delFile">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload" >上传到服务器</el-button> </el-upload>
-
script
methods: { delFile () { this.fileList = [] }, handleChange (file, fileList) { this.fileList = fileList // 此处就是放置在before-upload里的,用于判断可上传文件的格式 var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1) const extension = testmsg === 'dtmiro-project' if (!extension) { this.$message( { message: '上传文件只能是.dtmiro-project格式!', type: 'warning' } ) } return extension }, uploadFile (file) { this.formData.append('file', file.file) console.log('222', this.formData) }, handleRemove (file, fileList) { console.log(file, fileList) }, handlePreview (file) { console.log(file) }, async submitUpload () { // 上传到服务器 let formData = new FormData() formData.append('pid', this.pids) formData.append('file', this.fileList[0].raw) const res = await fetch('api/eo/dataCenter/import/page', { method: 'post', body: formData, headers: new Headers({ token: localStorage.getItem('Token') }) }) const rs = await res.json console.log('成功', rs) this.ledaDialog = false }, }