HTML
<!-- 弹出上传文件Dialog -->
<el-dialog title="上传文件" :visible.sync="dialogForm.uploadDialogVisible" width="29%" :close-on-click-modal="false">
<span>
<el-upload ref="upload" name="excel" class="upload-demo" :auto-upload="false" action="none" accept=".xls" drag :http-request="uploads">
<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>
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogForm.uploadDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="uploadExcel">确 定</el-button>
</span>
</el-dialog>
JS
uploadExcel(e) {
this.$refs.upload.submit()
},
uploads(content) {
const formData = new FormData()
// let batch_file = this.fileList[0].raw
formData.append('files', content.file)
console.log(content)
console.log(formData)
console.log(content.file)
console.log(this.tableData)
const config = {
headers: {
'Content-Type': 'multipart/form-data',
},
}
axios.post('http://localhost:8080/good/upload', config, formData).then((res) => {
console.log(res)
})
},
后台
@CrossOrigin
@RequestMapping("/upload")
public List<Object> upload(@RequestParam("excel") MultipartFile file) throws IOException {
// System.out.println(file.toString());
return goodService.upload(file);
}