element ui文件上传

<el-button size="small" type="primary" @click="editFn('新增任务',1)">新增任务el-button>
<el-button size="small" type="primary" @click="editFn(row,2)">修改el-button>
<vxe-modal
      ref="xModal"
      v-model="formDataLayer"
      row-id="id"
      :title="flag == 1 ? '新增任务' :  '修改'"
      width="40%"
      height="45%"
      resize
      destroy-on-close
      :show-footer="true"
      keep-source
      :scroll-x="{ enabled: false }"
      @close="closeFn('formData')"
    >
      <template #default>
        <el-form ref="formData" :model="formData" label-width="100px" :rules="rules">
          <el-form-item
            label="客户名称"
            prop="name"
          >
            <el-input v-model="formData.name" autocomplete="off"  />
          el-form-item>
          <el-form-item
            label="上传文件"
            prop="fileList"
            :rules="[
            {
              type: 'array',
              required: true,
              message: '请上传',
              trigger: 'blur'
            }
          ]"
          >
            <el-upload
              class="upload-demo"
              action="#"
              :on-preview="handlePreview"
              accept="rar, zip, doc, pdf, jpg"
              :on-remove="handleRemove"
              :http-request="requestUpload"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              multiple
              :limit="1000"
              :on-exceed="handleExceed"
            >
              <el-button size="small" type="primary" >选择文件el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.rar、.zip、.doc、.docx、.pdf、.jpg...div>
            el-upload>
          el-form-item>
          <el-form-item
            label="截止时间"
            prop="time"
          >
            <el-date-picker
              
              v-model="formData.time"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
            >el-date-picker>
          el-form-item>
          <el-form-item
            label="任务积分"
            prop="taskIntegral"
          >
            <el-input v-model="formData.taskIntegral" autocomplete="off"  />
          el-form-item>
        el-form>
      template>
      <template #footer>
        <el-button size="small" @click="formDataLayer = false">取消el-button>
        <el-button size="small" @click="confirmFn(flag)" type="primary" :loading="Loading">{{flag == 1 ? '确认发布' : '确认修改'}}el-button>
      template>
    vxe-modal>

data(){
return {
 formDataLayer: false, //新增 查看任务弹框
      flag: "", //新增任务or查看
      rules: {
        name: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        fileList: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
        time:[{ required: true, message: '请输入截止时间', trigger: 'blur' }],
       taskIntegral:[{ required: true, message: '请输入任务积分', trigger: 'blur' }]
      },
      //上传文件相关
      uploadFile: [],
      formData: {
        name: "",
        fileList: [],
        time: "",
        taskIntegral: "",
      },

	}
}

//oss文件上传方法
async function putFile(fileName, file) {
  try {
    let result = await oss.put(fileName, file)
    return result;
  } catch (e) {
    console.log(e);
  }
}

methods: {
    //todo:文件上传相关star
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      // 删除图片过滤
      this.uploadFile =
        this.uploadFile.filter(list => {
          return list.vueid != file.uid;
        }) || [];
      this.formData.fileList =
        this.formData.fileList.filter(list => {
          return list.vueid != file.uid;
        }) || [];
    },
    // 图片上传
    async requestUpload(param) {
      let targetRoute = `test1/${param?.file?.name}`;
      let res = await putFile(targetRoute, param.file);
      // 存储后端接口上传信息
      if (res.res.status == 200) {
        let pathUrl = await get(res.name);
        this.uploadFile.push({
          filename: res.name, // 原文件信息
          docurl: pathUrl,
          vueid: param?.file?.uid
        });
        this.formData.fileList.push({
          name: param?.file?.name,
          vueid: param?.file?.uid
        });
      }
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      let fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      let typeInfo = ["rar", "zip", "doc", "pdf", "jpg"];
      fileName = fileName.toLowerCase();
      if (!typeInfo.includes(fileName)) {
        this.$message({
          type: "warning",
          message: "请上传.rar、.zip、.doc、.docx、.pdf、.jp格式的图片"
        });
        return false;
      }
      const isLt2M = file.size < 1024 * 1024 * 3;
      if (!isLt2M) {
        this.$message({
          type: "warning",
          message: "上传图片大小不能超过3M"
        });
        return false;
      }
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    //todo:文件上传相关end
    //关闭弹框
    closeFn(formName) {
      this.$refs[formName].clearValidate();
    },
    //新增 修改任务按钮
    async editFn(row, flag) {
      console.log(row)
      this.flag = flag;
      this.formDataLayer = true;
      if (flag == 1) {
        console.log("新增任务");
        this.formData =  {
          name: "",
          fileList: [],
          time: "",
          taskIntegral: "",
        }
      } else {
        console.log("修改");
        this.formData = {
          name:row.aa,
          time:row.cc,
          taskIntegral:row.dd,
          fileList:[{name: "6666.jpg"}]
        }
      }
    },
}