一、vue3写法
1、html部分
<el-buttontype="info"plainicon="Upload"@click="handleImport"v-hasPermi="['system:user:import']">导入</el-button><!-- 导入对话框 --><el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body><el-uploadref="uploadRef":limit="1"accept=".xlsx, .xls":headers="upload.headers":action="upload.url + '?updateSupport=' + upload.updateSupport":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"drag><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><template #tip><div class="el-upload__tip text-center"><div class="el-upload__tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据</div><span>仅允许导入xls、xlsx格式文件。</span><el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link></div></template></el-upload><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitFileForm">确 定</el-button><el-button @click="upload.open = false">取 消</el-button></div></template></el-dialog>
2、js部分
/*** 导入参数 */
const upload = reactive({// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
});/** 导入按钮操作 */
function handleImport() {upload.title = "用户导入";upload.open = true;
};/** 下载模板操作 */
function importTemplate() {proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = (event, file, fileList) => {upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response, file, fileList) => {upload.open = false;upload.isUploading = false;proxy.$refs["uploadRef"].handleRemove(file);proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });getList();
};
/** 提交上传文件 */
function submitFileForm() {proxy.$refs["uploadRef"].submit();
};
二、vue2写法
1、html部分
<el-buttontype="info"plainicon="Upload"@click="handleImport"v-hasPermi="['system:user:import']">导入</el-button><!-- 导入对话框 -->
<el-dialog:title="upload.title":visible.sync="upload.open"width="400px"append-to-body><el-uploadref="upload":limit="1"accept=".xlsx, .xls":headers="upload.headers":action="upload.url + '?updateSupport=' + upload.updateSupport":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"drag><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div><div class="el-upload__tip text-center" slot="tip"><div class="el-upload__tip" slot="tip"><el-checkbox v-model="upload.updateSupport" />是否更新已经存在的数据</div><span>仅允许导入xls、xlsx格式文件。</span><el-linktype="primary":underline="false"style="font-size: 12px; vertical-align: baseline"@click="importTemplate">下载模板</el-link></div></el-upload><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitFileForm">确 定</el-button><el-button @click="upload.open = false">取 消</el-button></div></el-dialog>
2、js部分
data() {return {// 用户导入参数upload: {// 是否显示弹出层（用户导入）open: false,// 弹出层标题（用户导入）title: "",// 是否禁用上传isUploading: false,// 是否更新已经存在的用户数据updateSupport: 0,// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },// 上传的地址url: process.env.VUE_APP_BASE_API + "/system/user/importData",},};},/** 导入按钮操作 */handleImport() {this.upload.title = "用户导入";this.upload.open = true;},/** 下载模板操作 */importTemplate() {this.download("system/user/importTemplate",{},`user_template_${new Date().getTime()}.xlsx`);},// 文件上传中处理handleFileUploadProgress(event, file, fileList) {this.upload.isUploading = true;},// 文件上传成功处理handleFileSuccess(response, file, fileList) {this.upload.open = false;this.upload.isUploading = false;this.$refs.upload.clearFiles();this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +response.msg +"</div>","导入结果",{ dangerouslyUseHTMLString: true });this.getList();},// 提交上传文件submitFileForm() {this.$refs.upload.submit();},
三、展示效果
