点击按钮，出现弹窗，包含输入框，以及上传文件，输入框输入以及选中文件后，点击确定，同一个接口传给后台所有参数

EstherNi

已于 2022-06-21 17:29:27 修改

阅读量511

点赞数

分类专栏： VUE 文章标签： javascript 前端开发语言

于 2022-06-21 17:28:50 首次发布

本文链接：https://blog.csdn.net/EstherNi/article/details/125395102

版权

VUE 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这段代码展示了如何实现一个包含文件上传、预览、限制上传数量和类型的Vue组件。用户可以上传.docx或.pdf文件，并在上传前进行备注。上传过程中会添加请求头并验证文件类型，成功上传后会关闭对话框并触发搜索操作。

摘要由CSDN通过智能技术生成

 up: false, //上传的弹窗
  fileList: [
        // {
        //   name: "food.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
        // {
        //   name: "food2.jpeg",
        //   url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
       uploadheaders: {
        Authorization: "",
      },
       upLoadText: {},

 <el-button size="small" type="primary" @click="upload">上传</el-button>
  <el-dialog title="上传" :visible.sync="up" width="30%" class="dialog">
      <el-form class="upload" label-width="90px">
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入备注"
            v-model="textarea"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <el-button @click="select" size="small" type="primary">选取上传文件</el-button>
      <el-upload
        style="display: inline"
        class="upload-demo"
        ref="upload"
        :auto-upload="false"
        :action="upLoadUrl"
        accept=".docx,.pdf"
        :show-file-list="true"
        :file-list="fileList"
        :headers="uploadheaders"
        :before-upload="beforeUpload"
        :on-success="handle_success"
        :data="upLoadText"
        :limit="1"
        :on-exceed="handleExceed"
        :http-request="httpRequest"
      >
      </el-upload>

      <!-- <el-upload
        style="display: inline"
        class="upload-demo"
        ref="upload"
        :action="upLoadUrl"
        accept=".docx,.pdf"
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :show-file-list="true"
        :headers="uploadheaders"
        :before-upload="beforeUpload"
        :on-success="handle_success"
        :data="upLoadText"
      >
      </el-upload> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

  computed: {
    upLoadUrl() {
      return process.env.VUE_APP_BASE_API + "XXX接口";
    },
  },

import { getToken } from "@/utils/auth";
sure() {
      // debugger
  this.$refs.upload.submit();
      // console.log("dd：", this.addForm);
      // let query = {
      //   file: this.addForm.file,
      //   fileName: this.addForm.fileName,
      //   creator: this.addForm.creator,
      //   requirement: this.addForm.requirement,
      // };
      this.up = false;
    },
 cancel() {
      this.up = false;
    },
 httpRequest(params) {
      console.log("拿到上传文件：", params);
      console.log("dd：", this.addForm);
      var formdata = new FormData();
      formdata.append("requirement",this.addForm.requirement);
      formdata.append("fileName", this.addForm.fileName);
      formdata.append("file", this.addForm.file);
      formdata.append("creator",this.addForm.creator);
      formdata.append("remark", this.textarea);
      formdata.append("type", this.valueTextPop);
      let config = {
        // 添加请求头
        headers: { "XZ-Authorization": "Bearer " + getToken() },
      };
      console.log(config);
      axios
        .post(
          process.env.VUE_APP_BASE_API + "XXX接口",
          formdata,
          config
        )
        .then((res) => {
          console.log("res：", res);
          this.up = false;
          this.search();
        });
    },
  handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
 //上传之前调用方法
    beforeUpload(file) {
      // debugger
      console.log("上传之前调用方法：", this.uploadheaders);
      this.uploadheaders["XZ-Authorization"] = "Bearer " + getToken();
      this.addForm.file = file;
      this.addForm.fileName = file.name;
      // this.fileSize = file.size;
      // const extension = file.name.split(".").slice(-1) == "docx";
      // const extension1 = file.name.split(".").slice(-1) == "pdf";
      const extension2 = file.name.split(".").slice(-1);
      if (extension2 == "docx" || extension2 == "pdf") {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        let that = this;
        reader.onload = function () {
          that.addForm.fileData = reader.result;
        };
        return true; // 返回false不会自动上传
      } else {
        this.$message.warning("上传模板只能是word或者pdf格式!");
        return false;
      }
    },
      // 上传成功后
    handle_success(res) {
      console.log("上传成功：", res);
      this.search();
    },
   // 上传
    upload() {
      this.fileList = [];
      this.textarea = "";
      this.valueTextPop = "";
      this.up = true;
    },
    // 选取文件
    select() {
      this.toSelectFile();
    },
     toSelectFile() {
      // debugger
      this.upLoadText = {
        creator: window.sessionStorage.getItem("accountName"),
        fileName: this.addForm.fileName,
        requirement: this.addForm.selectedRequirement,
      };
      // 触发upload组件内部点击事件，弹出文件选择框
      this.$refs["upload"].$refs["upload-inner"].handleClick();
      console.log("this.addForm:", this.upLoadText);
    },