vue+饿了么实现基础的导入导出功能_上传文件饿了么csdn-CSDN博客

本文介绍了在Vue应用中实现的设备管理功能，包括模板导出和两种导入方式：普通file上传以及通过Base64上传Excel文件。涉及到了文件上传组件、API调用以及文件转Base64处理。

在这里插入图片描述
1.导出

<el-button  type="primary" icon="el-icon-download" size="small"  @click="exportFile">
模板导出
</el-button>
//导出
exportFile() {
			DeviceInfoGetTemplateFile().then(res => {
				window.open(res.data, '_blank');
			})
		},

2.1导入(普通file上传）

<el-upload accept="xls,xlsx"  class="avatar-uploader" :action="avatarUploadUrl" :headers="headers" :on-success="handleAvatarSuccess" :show-file-list="false">
			  <el-button  type="primary" icon="el-icon-document-add" >导入
			  </el-button>
</el-upload>
	data() {
		return {
			// 上传链接接口
			avatarUploadUrl:process.env.VUE_APP_BASE_API + '/DeviceInfo/ImportData',
			headers: { SYSTOKEN: getToken() },
}
}
// 上传成功
		handleAvatarSuccess(response, file) {
		  if (response.statusCode === 200) {
		   this.getList();
		    this.$message({
		      message: '图片上传成功',
		      type: 'success'
		    })
		  }
		},

2.2导入(转base64上传）

<el-upload class="upload-file" action="#" :before-upload="beforeUpload" :http-request="uploadFile"
				accept="xls,xlsx">
				<el-button  type="primary" icon="el-icon-document-add" size="small"
					style=" margin-left: 20px;color: #000;background-color: #3031330d;border-color: #3031330d;">导入
				</el-button>
</el-upload>
		// 导入
		beforeUpload(file) {
			let fileName = file.name;
			let fileType = fileName.substring(fileName.lastIndexOf('.'));
			if (fileType != '.xls' && fileType != '.xlsx') {
				this.$message.error('请上传Excel文件！');
				return false;
			}
		},
		uploadFile(data) {
			 getBase64(data.file).then(resBase64 => {
				console.log(data,778)
				ImportDataDeviceInfo(data.file).then(response => {
					if (response.statusCode === 200) {
						this.$message.success('成功');
						this.getList();
					} else {
						// this.$message.error(res.data.message);
						this.$alert('<strong>' + response.data.message + '</strong>', '错误提示', {
							dangerouslyUseHTMLString: true,
							// type: 'error',
							// center: true
						});
					}
				})
			 });
		},		
		//文件转base64
function getBase64(file) {
	return new Promise((resolve, reject) => {
		let reader = new FileReader();
		let fileResult = "";
		reader.readAsDataURL(file);
		//开始转
		reader.onload = function() {
			fileResult = reader.result;
		};
		//转 失败
		reader.onerror = function(error) {
			reject(error);
		};
		//转 结束  咱就 resolve 出去
		reader.onloadend = function() {
			resolve(fileResult);
		};
	});
}