vue3文件上传,保存时需要做的一些操作

247 阅读1分钟
<el-form-item label="附件" class="width60">
          <el-upload
            v-model:file-list="formData.tableDataList"
            class="upload-demo"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            action="/"
            :limit="6"
            :show-file-list="false"
            :auto-upload="false"
            :on-exceed="handleExceed"
            :on-success="uploadFileSuccess"
          >
            <el-button :icon="UploadFilled" type="primary">上传附件</el-button>
            <span class="el-upload__tip">
              <img src="@/assets/image/table/sigh.png" alt="" />
              最多上传6个文件,支持.pdf, .doc,
              .docx,.xls,.xlsx等格式文件上传,每个文件大小不超过100M
            </span>
          </el-upload>
        </el-form-item>

// 保存
const save = () => {
  if (!formRef.value) return;
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const formData = new FormData();
      const year =
        state.formData.technical_time &&
        typeof state.formData.technical_time === "object"
          ? new Date(state.formData.technical_time).getFullYear() + ""
          : state.formData.technical_time;
      formData.append("technical_name", state.formData.technical_name);
      formData.append("enterprise_id", state.formData.enterprise_id);
      formData.append("domain_id", state.formData.domain_id);
      formData.append("require_id", state.formData.require_id);
      formData.append("technical_source", state.formData.technical_source);
      formData.append("recommend_dep", state.formData.recommend_dep);
      formData.append("military_select", state.formData.military_select);
      formData.append("technical_level", state.formData.technical_level);
      formData.append("user_id", store.user.id);
      formData.append("user_name", store.user.user_name);
      formData.append("technical_time", year);
      formData.append("prior", state.formData.prior);
      formData.append("enterprise_name", state.formData.enterprise_name);
      let levelListAdd: any = [];
      let levelListEdit: any = [];
      let flag = false;
      state.formData.tableDataList.map((item: any, index: number) => {
        // 添加新增级别
        levelListAdd.push(item?.file_level);
        // 非数据库的数据才添加编辑级别
        item?.raw ? levelListEdit.push(item?.file_level) : "";
        item?.file_level ? (flag = false) : (flag = true);
        // 只有新增的数据才放到file_list
        item?.raw ? formData.append("file_list", item?.raw) : "";

        // 旧版本
        // item?.raw
        //   ? formData.append("file_list", item?.raw)
        //   : formData.append(
        //       "file_list",
        //       base64ToFile(item?.file_stream, item?.file_name, item?.file_type)
        //     );
      });
      // 级别必填校验
      if (flag) {
        return ElMessage.warning("请选择级别");
      }
      if (proxy.$route.query.id) {
        formData.append("id", state.formData.id);
        formData.append(`file_level`, levelListEdit);
        // 数据库里的数据修改删除
        formData.append(`file_info`, JSON.stringify(state.fileInfo));
        const res = await updateTechnicalInfo(formData);
        if (res?.data?.code > 0) {
          ElMessage.success("修改成功");
          goBack();
        }
      } else {
        formData.append(`file_level`, levelListAdd);
        const res = await addTechnicalInfo(formData);
        if (res?.data?.code > 0) {
          ElMessage.success("添加成功");
          state.formData.technical_name = "";
          state.formData.enterprise_id = "";
          state.formData.domain_id = "";
          state.formData.require_id = "";
          state.formData.recommend_dep = "";
          state.formData.military_select = "";
          state.formData.prior = "";
          state.formData.enterprise_name = "";
          formRef.value?.resetFields();
          state.formData.technical_level = state.levelSelectList[1].id;
          state.formData.tableDataList = [];
          await getSysDicJslyList();
        }
      }
    }
  });
};