vue3.0关于文件导入（上传）方法

 在我们开发中，有时会用到文件上传或者文件导入，如图，我们需要在文本框中输入内容或者直接导入文件内容，此输入框由按钮和上传组件一块组成，实现方法如下：

1.该输入框和上传按钮组成部分代码：

 <el-form-item label="上传文件 :" prop="regexRule">
              <el-input
                size="large"
                v-model="form.regexRule"
                placeholder="请输入内容或导入文件内容"
              >
                <template #append>
                  <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    multiple
                    v-model:file-list="fileList"
                    :on-change="fileChange"
                    :http-request="uploadFile"
                    accept=".txt"
                    :limit="2"
                  >
                    <template #trigger>
                      <el-button
                        @click="showchange"
                        plain
                        style="height: 42px;"
                      >
                        导入
                      </el-button>
                    </template>
                  </el-upload>
                </template>
              </el-input>
            </el-form-item>

2.js代码组成部分：

const fileList = ref([]);
const uploadRef = ref();

//判断上传文件格式、第二次上传文件是否保留、文件大小
const fileChange = (uploadFile, fileList) => {
  let imgSize = Number(uploadFile.size / 1024 / 1024);
  const isXlS = 'text/plain';
  if (![isXlS].includes(uploadFile.type)) {
    ElMessage.info('上传的文件格式不正确,请选择.txt类型文件');
    return false;
  }
  } else if (fileList.length > 1) {
    ElMessageBox.confirm('文件已存在，是否确定替换文件?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        fileList.slice(-1);
        uploadRef.value.handleRemove(fileList[0]);
      })
      .catch(() => {
        fileList.slice(0, 1);
        uploadRef.value.handleRemove(uploadFile);
      });
  } else if (imgSize >= 2) {
    ElMessageBox.confirm('文件大小不能超过2MB，请重新上传。', '警告', {
      confirmButtonText: '确定',
      type: 'warning',
    })
      .then(async () => {
        fileList.slice(-1);
        uploadRef.value.handleRemove(fileList[0]);
      })
      .catch(() => {
        fileList.slice(0, 1);
        uploadRef.value.handleRemove(uploadFile);
      });
  }
};

// 文件通过判断之后调接口
const uploadFile = async config => {
  uploadRef.value.clearFiles(); //去掉文件列表
  try {
    const fd = new FormData();
    fd.append('multipartFile', config.file);
    const res = await appTemplate(fd);
    if (res.code === 0) {
      ElMessage.success('文件上传文件成功');
      form.regexRule = res.data;
    }
  } catch (error) {
    console.log(error);
  }
};