element-ui代碼

<el-dialog :title="上傳附件" v-model="dialogAdds.visible" width="500px" append-to-body>

? ? ? ? ? ? ? ? <el-form-item label="唯一標識">

? ? ? ? ? ? ? ? ? ? <dict-tag v-if="form.groupId" :options="unique_identification" :value="form.identification" />

? ? ? ? ? ? ? ? ? ? <el-input v-else v-model="form.identification" disabled style="width:260px;" />

? ? ? ? ? ? ? ? </el-form-item>

? ? ? ? ? ? ? ? <el-form-item label="設備" prop="file">

? ? ? ? ? ? ? ? ? ? <template #default>

? ? ? ? ? ? ? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <label for="fileUpload">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="lBut"><span>選擇文件</span></div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </label>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="el-upload__tip text-red">允許上傳.xls .xlsx</div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input id="fileUpload" type="file" style="display: none;" accept=".xls,.xlsx" @change="handleFileChange" />

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="el-upload__tip text-red" v-if="uploadFileName">{{ uploadFileName }}</div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? </el-form-item>

? ? ? ? ? ? </el-form>

? ? ? ? ? ? <template #footer>

? ? ? ? ? ? ? ? <div class="dialog-footer">

? ? ? ? ? ? ? ? ? ? <el-button :loading="buttonLoading" type="primary" @click="submitFormMul">確 定</el-button>

? ? ? ? ? ? ? ? ? ? <el-button @click="cancelAdds">取 消</el-button>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? </template>

? ? ? ? </el-dialog>

js代碼

<script setup lang="ts">

import axios from 'axios';

const dialogAdds = reactive<DialogOption>({

? ? visible: false,

? ? title: ''

});

// 文件上傳

const handleFileChange = (event:any) => {

? ? if(event.target.files[0].size > 1024*1024*40){

? ? ? ? return proxy?.$modal.msgSuccess("上傳文件不能大于40M");

? ? }

? ? // 附件名稱

? ? uploadFileName.value=event.target.files[0].name;

? ? form.value.file= event.target.files[0];

}

// 保存操作

const submitFormMul = ()=>{

? ? deviceFormRef.value?.validate(async (valid: boolean) => {

? ? ? ? if (valid) {

? ? ? ? ? ? buttonLoading.value = true;

? ? ? ? ? ? const result=await axios.post(import.meta.env.VITE_APP_BASE_API+'/device/device/deviceImportByExcel', form.value, {

? ? ? ? ? ? ? ? headers: {

? ? ? ? ? ? ? ? ? ? 'Content-Type': 'multipart/form-data',

? ? ? ? ? ? ? ? },

? ? ? ? ? ? });

? ? ? ? ? ? if(result.data.code==601){

? ? ? ? ? ? ? ? proxy?.$modal.alertErrorTitle(result.data.data,"導入錯誤提示");

? ? ? ? ? ? }

? ? ? ? ? ? // 重置

? ? ? ? ? ? uploadFileName.value='';

? ? ? ? ? ? dialogAdds.visible = false;

? ? ? ? ? ? buttonLoading.value = false;

? ? ? ? }

? ? });

}

</script>

style樣式

<style>

.lBut{

? ? ? ? width: 87px;

? ? ? ? height: 32px;

? ? ? ? font-size: 14px;

? ? ? ? line-height: 1.15;

? ? ? ? display: flex;

? ? ? ? justify-content: center;

? ? ? ? align-items: center;

? ? ? ? border-radius: 4px;

? ? ? ? padding: 8px 10px;

? ? ? ? margin-left: 2px;

? ? ? ? transition: all 0.5s;

? ? ? ? white-space: nowrap;

? ? ? ? background-color: #409eff;

? ? ? ? color: white;

? ? ? ? border: 1px solid #409eff;

? ? }

</style>

結果展示