使用Vue，Element-ui导入Excel并预览显示数据，并经数据保存传至后台数据库_element ui 导入结果展示

需求：基于Vue，Element-ui框架，将本地Excel上传，并将表格中的数据绑定显示在上传页面，并保存提交到后台数据库

此功能在做的时候网上有很多的案例，但是都是基于Export2Excel.js文件和Blob.js文件来做的，我做的这个不是这种的，感觉还是比较有难度的，因此做了记录，希望能帮助你

首先看下总体的演示效果：

废话不多说，先上代码块

template中的结构代码

  <!--上传文件弹窗-->
   <!--文件上传组件就不多介绍，Element-UI官网还是比较详细的-->
	  <el-dialog
		      :title="dialogParams.title"
		      :visible.sync="dialogParams.visible"
		      :close-on-click-modal="false"
		      :top="'5%'"
		      custom-class="el-dialog--width960">
      <el-form :inline="false" :model="data = data01.Content" :rules="rules" ref="data01">
        <--注意，之所以此处加这个提示，是因为后天接口的限制，上传Excel 2007版本以上的Excel文件，文件后缀是xlsx,就会报错，所以此处只能上传xls后缀的Excel文件-->
      	<div class="boxTitle"><span class="warninger">上传文件后缀必须是(xls)，且根据模板上传，否则不能上传成功</span></div>
        <el-form-item label="采购详情表" prop="MDM017402" :label-width="dialogParams.formLabelWidth">
          <el-upload
            :action="uploadParams.url"
            :data="uploadParams.data"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :file-list="fileList"
            :disabled="uploadStatus">
            <el-button size="small" type="success" :disabled="uploadStatus">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <--v-if="uploadParams.preview"  控制预览表格，只有上传成功才可以看到表格，否则不显示-->
        <el-form-item v-if="uploadParams.preview"  label="预览" prop="MDM017402" :label-width="dialogParams.formLabelWidth">
          <el-table
            :data="data01.Content.MDM017402" 		//上传成功以后，接收返回的数据并显示到表格中
            border
            max-height="240"
            style="width: calc(100% - 15px)">
            <el-table-column
              type="index"
              width="60">
            </el-table-column>
            <el-table-column v-for="(item, index) in uploadParams.colModel" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm(data01)" :loading="submitStatus">确定上传</el-button>
      </span>
    </el-dialog>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

JS代码

在这里插入代码片，注意，我自己的Script代码中有好多变量您可能用不到，可以根据自己的实际情况进行选择
<script> 
	export default {
			return {
				data01: { //获取列表提交单据
					Content: {
						CardName: '',     //查询参数1
						UserName:'',       //查询参数2
						CardCode: '',      //查询参数3
						MDM017402:[],   //存放预览表格数据的数组变量
						OMS005301List:[],  //用来存放文件上传成功以后解析的数据
						BeginTime:'',      //上传文件表格数据所需字段  （开始时间）
						CustomerCode:'',   //上传文件表格数据所需字段   （客户代码）
						CustomerName:'',   //上传文件表格数据所需字段（客户名称）
						EndTime:'',				//上传文件表格数据所需字段（结束时间）
						ItemCode:'',			//上传文件表格数据所需字段 （物料代码）
						ItemName:'',			//上传文件表格数据所需字段   （物料名称）
					},
					Method: 'Q',     //接口查询参数
					page: 1,         //分页参数
					rows: 50,		 //分页参数
					sidx: 'DocEntry', //排序参数
					sord: 'DESC'      //排序参数
				},
				data02: {
			        Content: {
			          "CardCode": "",
			          "CardName": ""
			        } 
        		},
				total: 0,
				DropdownSaler:[],
				selectArr: [], //选中单据
				tableData: [],
				fileList:[],
				Loading: false,
				rules: {},  		//表单验证
				dialogParams: { // 上传文件模态框参数
			        title: '淘宝采购详情记录单上传',
			        visible: false,    // 上传文件模态不显示
			        formLabelWidth: '85px'
      			},
      			 uploadParams: {				 // uploadParams文件上传参数
			        url: global.OMS + '/OMS0053/OMS005302',    //上传接口
			        data: {
			        	Content:''
			        },
			        preview: false,       // 上传文件模态不显示
			        colModel: [         //声明一个数组，将上传数据绑定到表格中
			          { prop: 'ItemCode', label: '物料代码', width: '100' },
			          { prop: 'ItemName', label: '物料名称', width: '200' },
			          { prop: 'TaoBaoLink', label: '淘宝链接', width: '200' },
			          { prop: 'CustomerCode', label: '客户代码', width: '200' },
			          { prop: 'Remarks', label: '备注', width: '200' },
			        ]
      			},
      			 uploadStatus: false,
      			 submitStatus: false
			}
		},
		//钩子函数
		created() {
		    //在页面创建前调用请求数据接口的函数
			this.MDM017402()
		},
		methods:{
 		  pageChange(val) {
				this.data01.page = val
				this.MDM017402()
			},
			sizeChange(val) {
				this.data01.rows = val
				this.MDM017402()
			},
			searchClick() { //搜索
				this.MDM017402()
			},
			beforeUpload (file) {  //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
      			file && (this.uploadStatus = true)
    		},
    		uploadSuccess (response, fileList) {
    		  //response为上传文件的表格数据
    		  //fileList为上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
		      /* console.log(response)*/
		      if (response.Status === 200) {
		      	 this.$notify({
		            type: 'success',
		            titie: '上传成功',
		            message: '上传成功'
         		 })
		       this.uploadParams.preview = true;
		        //此处需要将返回的字符串数据进行解析，JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
		       this.data01.Content.MDM017402 = JSON.parse(response.Content)   ;
		      } else {
		        this.$notify.warning({
		          title: '解析失败',
		          message: response.Status + '：' + response.MessageString
		        })
		      }
		    },
		    //数据获取请求函数
			MDM017402() {
				this.$axios({
						method: 'post',
						url: global.OMS + '/OMS88888888888',    //请求接口
						data: this.data01			//请求接口的参数
					})
					.then((res) => {
						if(res.data.Status === 200) {						
							res.data.Content ?
								(this.tableData = res.data.Content.rows, this.total = res.data.Content.records) :
								(this.tableData = [], this.total = 0)
						} else {
							this.$notify({
								type: 'warning',
								title: '找不到该数据',
								/*message: res.data.Status + res.data.Message*/
							})
							this.tableData = []     //查询时，如果查不到改项目，整个表格数据为空，此处表格中的data的值就是取自tableData [ ] 数组中
						}
					}, (err) => {
						this.$notify({
							type: 'warning',
							title: '找不到该数据',
							message: err   //抛出后台返回的错误
						})
					})
			},
			//提交保存表格数据
			  submitForm () {
	      		this.$refs.data01.validate((valid) => { //对整个form表单做了数据验证
		        if (valid) {
		        	console.log(this.data01.Content.MDM017402)
		          if (this.data01.Content.MDM017402) {
		            this.submitStatus = true    //预览表格显示
		            //将获取的MDM017402的数据返回一个新数组，数组中copy的元素为原始2113数组5261元4102素调用函数处理后的值。
		            this.data01.Content.MDM017402.map((item, index, array) => {          
		              	array[index] = {      //将上面预览表格数据
		                ItemCode: item.ItemCode,
		                ItemName: item.ItemName,
		                UserCode: item.UserCode,
		                TaoBaoLink: item.TaoBaoLink,
		                CustomerCode:item.CustomerCode,
						Remarks:item.Remarks		               
              }
            })
           //将上传的数据解析，并转换格式
            this.data01.Content.OMS005301List = JSON.parse(JSON.stringify(this.data01.Content.MDM017402))        
            this.$axios({
              method: 'post',
              url: global.OMS + '/OMS0053/OMS005303',
              data: this.data01
            }).then((res) => {
              if (res.data.Status === 200) {
                this.$notify.success({
                  title: '上传成功',
                  message: ' 上传成功'
                })
                this.dialogParams.visible = false
                this.MDM017402()
                this.submitStatus = false
              } else {
                console.warn(res.data)
                this.$notify.warning({
                  title: '上传失败',
                  message: res.data.Status + '：' + res.data.Message
                })
              }
            }, (err) => {
              console.warn(err)
            })
          } else {
            this.$notify.warning({
              title: '上传失败',
              message: '没有数据'
            })
          }
        } else {
          return false
            }
           })
         },
			
        }
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186