当前位置：首页 > news >正文

VUE饿了么UPload组件自定义上传

news 2025/7/7 19:01:31

代码：

1.视图：

 <el-dialog :title="dialogTitle" width="30%" :visible.sync="dialogFormVisible" :destroy-on-close="true"><el-form ref="fileForm" class="items-align" ><el-form-item><el-upload:limit="1"class="upload-demo"accept=".xlsx, .csv, .xls"action = '':auto-upload="false":on-change = "onFileChange":on-exceed = "fileExceed":on-remove="handleRemove"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip" slot="tip">只能上传excel文件</div></el-upload></el-form-item><el-form-item><el-link type="primary" download="resourceManagementDemo.xlsx" href="excel/resourceManagementDemo.xlsx">点击下载模版</el-link></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取消</el-button><el-button type="primary" @click="fileUpload">确认</el-button></div></el-dialog>

最外层的el-dialog, :destroy-on-close="true"，能够在关闭弹窗后销毁文件上传组件，清空文件列表。

2.JS：

onFileChange(file){// debuggerthis.fileList.push(file.raw)
},
fileExceed(){this.$alert("文件上传数量只能为1")
},
handleRemove(){this.fileList.pop()
},

3.文件上传POST

 fileUpload() {const url = '******'const form = new FormData();if(this.fileList.length==0){this.$alert("文件数量不能为0")return}form.append("file", this.fileList[0])const params = {*****}this.$axios.post(url, form, {params}).then(res=>{if(res.status==200&&res.data.result=="SUCCESS"){setTimeout(()=>{this.$alert("您的文件已导入","提示",{callback: (action) => {this.fileList = []this.render()},})},500)this.dialogFormVisible = false}else{this.$alert("导入失败，请重试")}},error=>{this.$alert("导入失败，请重试")})},