vue 使用 el-upload 上传文件(自动上传/手动上传)

vue 使用 el-upload 上传文件(自动上传/手动上传)

1. 自动上传(选择完文件后,调用axios上传)

<el-uploadref="upload1"action:multiple="false"accept=".xlsx,.csv,.xls":auto-upload="false":on-change="handleFileChange":show-file-list="false"
><el-button type="success" icon="el-icon-upload2">导入</el-button>
</el-upload>

• 上传

 // 当开启多选时 filelist有值async handleFileChange(file, filelist) {this.httpImportFile(file.raw);
},
httpImportFile(file) {let formDatas = new FormData();formDatas.append("file", file);apiImport(formDatas).then((res) => {this.$message.success("导入成功");this.$refs.upload1.clearFiles();}).catch((err) => {});
},

2.手动上传

<el-upload ref="upfile":auto-upload="false":on-change="handleChange":file-list="fileList":multiple="true"accept=".xlsx,.csv,.xls"action="#"><el-button  type="success">选择文件</el-button>
</el-upload><el-button  type="success" @click="upload">点击上传</el-button>

• 上传

export default {data(){return{fileList:[]}},methods:{//获得文件列表handleChange(file, fileList) {this.fileList = fileList;},upload(){let fd = new FormData();this.fileList.forEach(item=>{//文件信息中raw才是真的文件fd.append("files",item.raw);})apiImport(fd).then(res=>{if (res.code === 200) {this.$message('上传成功')}else{this.$message('失败')}})},}
}