el-upload上传文件时添加参数

该文章已生成可运行项目,
<template>
  <el-upload
    class="upload-demo"
    :accept="fileType.join(',')"
    :disabled="disabled"
    :action="action"
    :headers="headers"
    :show-file-list="showFileList"
    :multiple="multiple"
    :before-upload="beforeAvatarUpload"
    :file-list="fileList"
    :on-remove="handleRemove"
    :on-preview="handlePreview"
    :on-success="handleAvatarSuccess"
    :http-request="customUpload"
  >
    <slot name="main"> </slot>
  </el-upload>
</template>

<script>
import { getCookie } from "@/utils/cookie";
import axios from "axios";
export default {
  props: {
    fileType: {
      type: Array,
      default: () => [],
    },
    multiple: {
      type: Boolean,
      default: () => false,
    },
    showFileList: {
      type: Boolean,
      default: () => false,
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    prefix: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      action: process.env.VUE_APP_API + "/casApi/oss/uploadFileNew",
      headers: {
        Authorization: "Bearer " + getCookie("electronic_token_enterprise"),
        isBackSys: true,
      },
      fileData: [],
    };
  },
  watch: {
    fileList:{
      handler(newVal){
        this.fileData = [...newVal];
      },
      immediate:true,
      deep:true
    }
  },
  methods: {
    customUpload(options) {
      const formData = new FormData();
      // 添加额外的字段
      formData.append("prefix", this.prefix); // 添加 type 字段
      formData.append("file", options.file); // 添加文件字段
      axios
        .post(this.action, formData, {
          headers: {
            Authorization: "Bearer " + getCookie("electronic_token_enterprise"),
          },
        }) // 上传块数据
        .then((res) => {
          options.onSuccess(res.data)
        })
        .catch((err) => {
          reject(err);
        });
    },
    // 触发上传
    handleUpload() {
      this.$refs.upload.submit();
    },

    handlePreview(file) {
      console.log(file, "aaaaaaaaaaaa");
      if (file.url) {
        window.open(file.url);
        // this.downLoad(file.url)
      } else {
        window.open(file.response.data[0]);
        // this.downLoad(file.response.data[0]);
      }
    },
    downLoad(url) {
      var a = document.createElement("a");
      a.href = url;
      a.target = "_blank";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileData.splice(
        this.fileData.findIndex((i) => i.uid === file.uid),
        1
      );
      this.$emit("uploadFile", this.fileData);
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(res, file, fileList, "aaaaaaaaaa");
      if (res.code == 0) {
        if (this.multiple) {
          this.fileData.push({
            url: res.data[0],
            name: file.name,
            uid: file.uid,
          });
          console.log(this.fileData, "fileData");
          this.$emit("uploadFile", this.fileData);
        } else {
          this.$emit("uploadFile", res.data[0], file);
        }
        this.$emit("changeLoading", false);
      } else {
        this.$message.error("上传失败,原因:" + res.retMsg);
        this.$emit("changeLoading", false);
      }
    },
    beforeAvatarUpload(file) {
      let isFileType = true;
      if (this.fileType.length) {
        let type = file.name.length
          ? file.name.substring(file.name.lastIndexOf(".") + 1)
          : "";
        console.log(this.fileType, type);
        isFileType = this.fileType.includes("." + type);
        if (!isFileType) {
          this.$message.error("上传文件类型错误");
        }
      }
      console.log(isFileType);
      if (isFileType) {
        this.$emit("changeLoading", true);
        // this.customUpload(file)
      }
      return isFileType;
    },
  },
  mounted() {
    this.fileData = [...this.fileList];
    console.log(this.fileData, "sssssssssssssss");
    // this.fileList = JSON.parse(
    //   `[{"url":"http://8.130.146.219:9000/sbxq/project/20240927/vwxf1p89plbz_no-zhaozf.xlsx","name":"plbz_no-zhaozf.xlsx"},{"url":"http://8.130.146.219:9000/sbxq/project/20240927/5hhtd9s2ssssssssss.xlsx","name":"ssssssssss.xlsx"}]`
    // );
    // this.fileData=JSON.parse(
    //   `[{"url":"http://8.130.146.219:9000/sbxq/project/20240927/vwxf1p89plbz_no-zhaozf.xlsx","name":"plbz_no-zhaozf.xlsx"},{"url":"http://8.130.146.219:9000/sbxq/project/20240927/5hhtd9s2ssssssssss.xlsx","name":"ssssssssss.xlsx"}]`
    // );
  },
};
</script>
<style lang="scss" scoped>
.upload-demo {
  display: inline-block;
  /deep/.el-upload {
    width: 100%;
    text-align: left;
  }
}
/deep/.el-upload-list__item.is-success.focusing .el-icon-close-tip {
  display: none !important;
}
</style>

本文章已经生成可运行项目
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值