# ytFileUpload 文件上传组件

# 实例属性

属性名	默认值	类型	描述	是否必填
utilsObj	见 utilsObj 配置表	Object	附件上传的配置项	true
actionUrl	""	String	文件上传的接口: 如：process.env.VUE_APP_BASE_API + "/file/upload"	true
headerObj	{}	Object	文件上传请求头参数（放在requestHeaders请求头中，一般存放token 如：{AuthorizationSys: "tokenKey"}）	根据项目需求设置
uploadType	见 uploadType 配置表	Object	文件上传类型控制（如需添加自定义文件类型：请查看 handBeforeUpload(file) {// file.type}）

# utilsObj 配置表

属性名	默认值	类型	描述	是否必填
isDisabled	false	Boolean	是否禁用附件上传的功能
fileList	[]	Array	已经上传的附件列表	true
limitNum	3	Number	限制上传的文件数量（个）
fileSize	50	Number	单文件上传大小（MB）
typeStyle	0	Number	文件上传的样式控制（可选值：0（按钮） 1（自定义）
isMultiple	false	Boolean	是否支持同时选择多个文件
btnSize	"medium"	String	上传按钮的尺寸如：medium / small / mini
btnIcon	"el-icon-upload"	String	上传按钮展示的图标
btnType	"primary"	String	上传按钮的样式类型如：primary / success / warning / danger / info / text
btnContent	"上传附件"	String	上传按钮展示的文字内容

# uploadType 配置表

属性名	默认值	类型	描述	是否必填
fileType	["application/vnd.android.package-archive","application/x-zip-compressed","application/pdf","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document","application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",]	Array	默认可上传的类型
fileName	["apk","zip","pdf","doc","docx","xls","xlsx"]	Array	默认可上传的类型对应的后缀名

# 事件

事件名	参数	描述
getFileUploadYt	file	将处理之后的文件数组传给父组件

# 简单使用

<!--
 * @Description: 文件上传通用组件的使用 页面
 * @Author: mhf
 * @Date: 2023/10/27 17:52
-->
<template>
  <div>
    <ytFileUpload ref="ytFileUpload"
                  :utilsObj="utilsObj"
                  :actionUrl="actionUrl"
                  :uploadType="uploadType"
                  @getFileUploadYt="getFileUploadYt"
    />
  </div>
</template>

<script>
export default {
  name: "useYtFileUpload",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      utilsObj: {
        isDisabled: false, // 是否禁用附件上传的功能
        fileList: [], // 已经上传的附件列表
        limitNum: 3, // 限制上传的文件数量 （个）
        fileSize: 50, // 单文件上传大小（MB）
        typeStyle: 0, // 文件上传的样式控制
        isMultiple: false, // 是否支持同时选择多个文件
        btnSize: "medium", // 上传按钮的尺寸 如：medium / small / mini
        btnIcon: "el-icon-upload", // 上传按钮展示的图标
        btnType: "primary", // 上传按钮的样式类型 如：primary / success / warning / danger / info / text
        btnContent: "上传附件", // 上传按钮展示的文字内容
      },
      actionUrl: "http://127.0.0.1:3002/api/upload",
      uploadType: {
        fileType: [
          "application/pdf",
          "application/msword",
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          "application/vnd.ms-excel",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        ],
        fileName: ["pdf", "doc", "docx", "xls", "xlsx"]
      }

    };
  },
  methods: {
    getFileUploadYt(data) {
      // this.formData.annexUrl = data;
      console.log(data);
    },
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
};
</script>

<style lang="scss" scoped></style>

# 返给父组件的数据/附件回显的格式类型

[
  {
    "uid": 1698475119831,
    "name": "2023/10/28/eed1d5d890a640b189002987ea03a5e0.zip",
    "suffix": ".zip",
    "url": "http://192.168.0.254:19000/trend/2023/10/28/eed1d5d890a640b189002987ea03a5e0.zip",
    "status": "success"
  },
  {
    "uid": 1698475355339,
    "name": "2023/10/28/d5b2c6eef36c48c48c53cf195aea0041.docx",
    "suffix": ".docx",
    "url": "http://192.168.0.254:19000/trend/2023/10/28/d5b2c6eef36c48c48c53cf195aea0041.docx",
    "status": "success"
  }
]

# 注意事项

1. 以下数据中，name 和 url 字段是必填的，其他字段选填。
[
{
"uid": 1698475119831,
"name": "2023/10/28/eed1d5d890a640b189002987ea03a5e0.zip",
"suffix": ".zip",
"url": "http://192.168.0.254:19000/trend/2023/10/28/eed1d5d890a640b189002987ea03a5e0.zip",
"status": "success"
},
{
"uid": 1698475355339,
"name": "2023/10/28/d5b2c6eef36c48c48c53cf195aea0041.docx",
"suffix": ".docx",
"url": "http://192.168.0.254:19000/trend/2023/10/28/d5b2c6eef36c48c48c53cf195aea0041.docx",
"status": "success"
}
]
2. 如果在新页面 或者 弹窗中使用该组件，并且需要回显数据的场景中
2.1 beforeDestory/destroyed生命周期钩子中需重置 utilsObj.fileList
2.2 需添加 v-if 使弹窗或新页面 完全卸载，如：
<el-dialog
        :visible.sync="visibleFlag"
        v-if="visibleFlag">
</el-dialog>
3. 请注意，本组件文件上传成功之后返回的数据格式如下,如遇后端返回的数据格式不是这样请修改 handlePrevie()、handleSuccess()、handleRemove()方法
{
"code": 1,
"message": "操作成功",
"data": {
"name": "2023/10/28/36cbc0d338f94caca2a9c02b2a19ffe2.apk",
"suffix": ".apk",
"url": "http://192.168.0.254:19000/trend/2023/10/28/36cbc0d338f94caca2a9c02b2a19ffe2.apk"
}
}

# 在弹窗中使用

<!--
 * @Description: ytFileUpload在弹窗中的使用，并实现数据回显 页面
 * @Author: mhf
 * @Date: 2023/10/28 19:25
-->
<template>
  <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="visibleFlag"
      v-if="visibleFlag"
      width="900px"
      append-to-body
      @close="hideDialog"
  >
    <el-form
        ref="form"
        :model="formData"
        :rules="formRules"
        label-width="110px"
    >
      <el-form-item label="附件 :" prop="annexUrl">
        <ytFileUpload :headerObj="headerObj"
                      :actionUrl="actionUrl"
                      :utilsObj="utilsObj"
                      @getFileUploadYt="getFileUploadYt"
        />

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

    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="hideDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "attachConfigDialog",
  dicts: ["sys_annex_type"],
  data() {
    return {
      title: "",
      visibleFlag: false,
      formData: {
        annexUrl: [],
      },
      headerObj: {
        AuthorizationSys: "放在请求头上的token"
      },
      actionUrl: process.env.VUE_APP_BASE_API + "/tlxx-modules-annex/annexAction/upload",
      utilsObj: {
        isDisabled: false, // 是否禁用附件上传的功能
        fileList: [], // 已经上传的附件列表
        limitNum: 2, // 限制上传的文件数量 （个）
        fileSize: 50, // 单文件上传大小（MB）
        typeStyle: 0, // 文件上传的样式控制
        isMultiple: false, // 是否支持同时选择多个文件
        btnSize: "medium", // 上传按钮的尺寸 如：medium / small / mini
        btnIcon: "el-icon-upload", // 上传按钮展示的图标
        btnType: "text", // 上传按钮的样式类型 如：primary / success / warning / danger / info / text
        btnContent: "上传附件",
      }
    };
  },
  methods: {
    hideDialog() {
      this.visibleFlag = false;
      this.formData = {};
      this.$parent.getList();
      this.utilsObj.fileList = []; // 关闭弹窗时，清空附件列表
    },
    showDialog(data) {
      this.visibleFlag = true;
      this.title = data.title;
      if (this.title === "修改项目附件配置") {
        this.getDetail(data.data.id);
      }
    },

    /**
     * @Interface 详情接口
     * @description:
     * @author: mhf
     * @time: 2023-10-28 19:32:21
     **/
    getDetail(id) {
      function detailInterface() {
      } // 模拟请求
      detailInterface(id).then((res) => {
        if (res.code === 1) {
          this.formData = res.data;
          this.formData.annexUrl = JSON.parse(res.data.annexUrl);
          if (!this.formData.annexUrl) {
            this.formData.annexUrl = [];
          }
          this.utilsObj.fileList = this.formData.annexUrl; // 附件回显
        } else {
          this.$message.error("获取详情数据失败！");
        }
      });
    },
    submitForm() {
      function updateProjectAnnex() {
      } // 模拟请求
      function addProjectAnnex() {
      } // 模拟请求
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.title === "修改") {
            this.formData.annexUrl !== []
                ? (this.formData.annexUrl = JSON.stringify(
                    this.formData.annexUrl
                ))
                : (this.formData.annexUrl = []);
            updateProjectAnnex(this.formData)
                .then((res) => {
                  if (res.code === 1) {
                    this.$message.success("修改成功！");
                    this.hideDialog();
                  } else {
                    this.$message.warning(res.message);
                  }
                })
                .catch((e) => {
                  throw e;
                });
          }
          if (this.title === "新增项目附件配置") {
            this.formData.annexUrl !== []
                ? (this.formData.annexUrl = JSON.stringify(
                    this.formData.annexUrl
                ))
                : (this.formData.annexUrl = []);
            addProjectAnnex(this.formData)
                .then((res) => {
                  if (res.code === 1) {
                    this.$message.success("添加成功！");
                    this.hideDialog();
                  } else {
                    this.$message.warning(res.message);
                  }
                })
                .catch((e) => {
                  throw e;
                });
          }
        } else {
          return false;
        }
      });
    },

    /**
     * @Event 获取组件上传得到的最终文件数组
     * @description:
     * @author: mhf
     * @time: 2023-10-28 19:34:24
     **/
    getFileUploadYt(e) {
      this.formData.annexUrl = e;
      console.log(e, "获取到的文件 e")
    }
  },

  destroyed() {
  }
};
</script>

<style scoped>
</style>

← ytRealCanvas实时canvas组件 ytForm搜索表单组件 →

# ytFileUpload 文件上传组件

# 实例属性

# utilsObj 配置表

# uploadType 配置表

# 事件

# 简单使用

# 返给父组件的数据/附件回显 的格式类型

# 注意事项

# 在弹窗中使用

# 返给父组件的数据/附件回显的格式类型