element-ui之上传

image.png

需求：上传报文，限制大小不超过500M，只能传txt/sef文件。

代码：upload.vue

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-upload
          :disabled="status >= 400"
          class="upload-demo"
          ref="upload"
          :before-upload="beforeUpload"
          :before-remove="beforeRemove"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :onError="uploadError"
          :onSuccess="uploadSuccess"
          :file-list="FILE_LIST"
          :action="url"
          :auto-upload="false">
          <el-button :disabled="status >= 400" slot="trigger" size="small" type="primary">
            选择报文
          </el-button>
          <el-button :disabled="status >= 400" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
            上传到服务器
          </el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传sef/txt文件，且不超过500KB
          </div>
        </el-upload>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { paymentApi } from "@/api/payment";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      fileList: [],
      url: "",
      fileData: {
        MultipartHttpServletRequest: "", // 文件
        id: "", // 申请单ID
        messageType: 1 // 类型，1薪酬
      }
    };
  },
  props: {
    status: ""
  },
  created() {
    if (this.$route.params.DATA) {
      this.url =
        "http://10.234.242.21:5121/pa//consign/upload?type=1&id=" +
        this.$route.params.DATA.ID;
      this.download();
    }
  },
  computed: {
    ...mapGetters(["FILE_LIST"])
  },
  methods: {
    // 获取
    download() {
      paymentApi
        .queryFiles(this.$route.params.DATA.ID)
        .then(res => {
          for (let key of res) {
            var obj = {};
            obj.name =
              key.FILE_NAME +
              "--上传时间：" +
              this.GLOBAL.timestampToTime(key.CREATE_TIME);
            obj.url = key.FILE_PATH;
            obj.id = key.ID;
            this.fileList.push(obj);
          }

          this.$store.dispatch("setFileList", this.fileList);
        })
        .catch(err => {
          let msg = err.response.data["message"];
          this.$message({
            message: msg ? msg : "获取数据失败",
            type: "error"
          });
        });
    },
    // 移除之前确认
    beforeRemove(file, fileList) {
      var fileName = file.name.split("--");
      return this.$confirm(`确定移除 ${fileName[0]}？`);
    },
    // 上传之前验证
    beforeUpload(file) {
      let size = file.size;
      let arr = file.name.split(".");
      let str = arr[arr.length - 1].trim();
      const fileType = "sef/txt";
      if (fileType.indexOf(str) === -1) {
        this.$message({
          message: "只能上传" + fileType + "文件",
          type: "error"
        });
        return false;
      }
      if (size > 4096000) {
        this.$message({
          message: "文件不能大于500kb",
          type: "error"
        });
        return false;
      }
      this.upLoadding = true;
    },
    // 上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 上传成功时
    uploadSuccess(res, file, fileList) {
      var name = res[0].FILE_NAME.split("--");
      file.name =
        name[0] +
        "--上传时间：" +
        this.GLOBAL.timestampToTime(res[0].CREATE_TIME);
      file.id = res[0].ID;
      this.$store.dispatch("setFileList", fileList);
    },
    // 上传失败时
    uploadError(err, file, fileList) {},
    // 删除
    handleRemove(file, fileList) {
      if (!!file.id) {
        paymentApi
          .remove(file.id)
          .then(res => {
            // console.log(res,'删除报文')
            if (res) {
              this.$message({
                message: "已删除",
                type: "success"
              });
            }
          })
          .catch(err => {
            let msg = err.response.data["message"];
            this.$message({
              message: msg ? msg : "获取数据失败",
              type: "error"
            });
          });
      }

      this.$store.dispatch("setFileList", fileList);
    },
    // 查看
    handlePreview(file) {
      window.open(file.url);
    }
  }
};
</script>