vue 之 ele上传文件 和 下载文件

最新推荐文章于 2023-05-17 15:57:06 发布
最新推荐文章于 2023-05-17 15:57:06 发布
阅读量849 收藏 4
点赞数 1
分类专栏： vue后台管理系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47409897/article/details/117153876
版权

目录

vue 之 ele上传文件与下载文件 ele+手写 （不提倡）

vue 之 ele上传文件

在这里插入图片描述

  • 一点击选取文件的时候，直接对接后端接口，上传文件，获取返回的数据对象
  • 可以删除已上传的文件，也需要对接后端接口进行删除
<template>
  <div class="upload_file clear_fix">
    <div class="upload_file_title">{{ title }}</div>
    <div class="upload_file_btn">
      <el-form :model="uploadForm" οnsubmit="return false">
        <el-form-item label="">
          <el-upload
            ref="uploadForm"
            action=""
            :file-list="fileList"
            :on-change="handleFileChange"
            :on-remove="removeFile"
            :auto-upload="false"
            multiple
            accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.pot,.pps,.vsd,.rtf,.wps,.et,.dps,.pdf,.txt,.7z,.rar,.zip"
          >
            <el-button size="small" type="primary" slot="trigger"
              >选取文件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="upload_file_tip">
        <div>支持格式：</div>
        <div>jpg、png、</div>
        <div>docx、xlsx等</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/utils/request.js";
import { removeFileGet } from "@/api/creditManagement/singleAdd/singleAdd.js";
export default {
  name: "UploadFile",
  components: {},
  props: {
    clearFileFlag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: "上传文件：",
      fileList: [],
      uploadForm: {},
      file: {}, // 上传文件
      uploadAllFile: [], // 上传的文件的所有数据
      // clearFile: false, // 清除 上传的文件的flag
    };
  },
  watch: {
    uploadAllFile(val) {
      this.uploadAllFile = val;
      this.$emit("uploadAllFile", this.uploadAllFile);
    },
    clearFileFlag(val) {
      // this.clearFile = val;
      // console.log("上传文件的flag", val);
      if (val) {
        this.file = {};
        this.uploadAllFile = [];
        let dom = document.querySelector(".el-upload-list");
        let donChildObj = dom.childNodes;
        for (var i = donChildObj.length - 1; i >= 0; i--) {
          // 一定要倒序删除dom子节点
          dom.removeChild(donChildObj[i]);
        }
        // console.log("dom2", dom);
        this.$store.commit("clearFileFlag", false);
      }
    },
  },
  methods: {
    //上传文件，获取文件流
    handleFileChange(file, fileList) {
      this.$store.commit("clearFileFlag", false);
      this.file = file.raw;
      // 创建表单对象 用于数据的格式  + 用于添加流文件！
      let formData = new FormData();
      formData.append("files", this.file);
      axios
        .post(baseUrl + "/eap/uploadFile", formData, {
          headers: {
            "Content-Type": "multipart/form-data",
            Token: JSON.parse(sessionStorage.getItem("token")),
          },
        })
        .then(({ data }) => {
          // console.log("上传文件data", data.dat);
          if (data.code == 0) {
            file.busiid = data.dat[0].busiid;
            this.uploadAllFile.push(data.dat[0]);
            this.$message({ type: "success", message: "上传文件成功" });
          } else {
            let dom = document.querySelector(".el-upload-list")
            let donChildObj = dom.childNodes;
            dom.removeChild(donChildObj[donChildObj.length - 1]);
            this.uploadAllFile.pop();
            this.$message({ type: "error", message: "上传文件失败" });
          }
        });
    },
    // 删除文件
    removeFile(file) {
      // console.log("移除文件", file);
      removeFileGet(file.busiid).then(({ data }) => {
        if (data.code == 0) {
          this.$message({ type: "success", message: "删除文件成功" });
        } else {
          this.$message({ type: "error", message: data.dat });
        }
      });
      this.uploadAllFile = this.uploadAllFile.filter((item) => {
        return item.busiid != file.busiid;
      });
    },
  },
};
</script>
<style  lang="scss" scoped>
.upload_file {
  // position: relative;
  // top: -15px;
  background: #fff;
  .upload_file_title {
    float: left;
    text-align: right;
    width: 110px;
    height: 40px;
    line-height: 40px;
  }
  .upload_file_btn {
    position: relative;
    float: left;
  }
  .upload_file_tip {
    position: absolute;
    top: 35px;
    left: 0px;
    width: 80px;
    height: 49px;

    div {
      font-size: 12px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #b9bcc5;
      line-height: 14px;
    }
  }
}
::v-deep .el-button--small {
  padding: 6px 16px !important;
}
::v-deep .el-upload-list {
  position: relative;
  left: 100px;
  top: -34px;
  width: 640px;
  background: #000;
  clear: both;
  li {
    float: left;
    width: 33% !important;
  }
  .el-upload-list__item {
    margin-top: 10px !important;
  }
}
</style>

vue之下载文件

// 下载
    downloadBtn(row) {
      if (row.contractno) { // 合同编号
      	// 先查询是否有文件 
        getDownloadFile(row.contractno).then(({ data }) => {
          // console.log("data", data);
          // 有文件的时候 下载
          if (data.code == 0 && data.dat && data.dat.length > 0) {
            axios
              .post(baseUrl + "/eap/downloadFile", data.dat, {
                headers: {
                  "Content-Type": "application/json;charset=UTF-8",
                  Token: JSON.parse(sessionStorage.getItem("token")),
                },
                responseType: "blob",
              })
              .then((res) => {
              	// 创建a标签的形势去下载
                let link = document.createElement("a");
                //ArrayBuffer 转为 Blob
                let blob = new Blob([res.data], {
                  type: "application/zip",
                });
                // console.log("blob", blob);
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                if (window.navigator.msSaveOrOpenBlob) {
                  navigator.msSaveBlob(blob, "附件1.zip");
                } else {
                  let link = document.createElement("a");
                  link.href = window.URL.createObjectURL(blob);
                  link.download = "附件2.zip";
                  link.click();
                  //释放内存
                  window.URL.revokeObjectURL(link.href);
                }
              });
          }
        });
      } else {
        this.$message({
          message: "温馨提示：合同编号不能为空",
          type: "warning",
        });
      }
    },

上传组件的回显 + 添加删除 与下载事件

<template>
  <div class="upload_file clear_fix">
    <!-- lowApplyStatus {{ lowApplyStatus }} isDisable {{ isDisable }} -->
    <!-- uploadFile -- {{ uploadFile }}  -->
    <!-- uploadAllFile -- {{ uploadAllFile }} -->
    <div class="upload_file_title">{{ title }}</div>
    <div class="upload_file_btn">
      <el-form :model="uploadForm" onsubmit="return false">
        <el-form-item label="">
          <el-upload
            ref="uploadForm"
            action=""
            :file-list="fileList"
            :on-change="handleFileChange"
            :on-remove="removeFile"
            :auto-upload="false"
            multiple
            :disabled="isDisable"
            accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.pot,.pps,.vsd,.rtf,.wps,.et,.dps,.pdf,.txt,.7z,.rar,.zip"
          >
            <el-button
              size="small"
              type="primary"
              slot="trigger"
              :disabled="isDisable"
              >选取文件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="upload_file_tip">
        <div>支持格式：</div>
        <div>jpg、png、</div>
        <div>docx、xlsx等</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/utils/request.js";
import { postSign } from "@/utils/sign.js";
import {
  removeFileGet,
  downloadFileGet,
} from "@/api/creditManagement/singleAdd/singleAdd.js";
import { deepCopy } from "@/utils/createTool.js";
import requestDown from "@/utils/requestDown";
import { getDownloadFile } from "@/api/creditManagement/businessQuery/ExternalCreditDetailsQuery";
export default {
  name: "UploadFileEdit",
  components: {},
  props: {
    uploadFile: {
      type: Array,
      default() {
        return [];
      },
    },
    lowApplyStatus: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "上传文件：",
      fileList: [],
      uploadForm: {},
      file: {}, // 上传文件
      uploadAllFile: [],
      isDisable: false, // 是否禁用
      // uploadAllFile: this.uploadFile, // 上传的文件的所有数据
    };
  },
  watch: {
    uploadAllFile: {
      handler(newV) {
        // console.log("最新的文件val", newV);
        // 给当前 li 添加下载功能
        let allLiDom = document.querySelectorAll(".el-upload-list li");
        // console.log("allLiDom", allLiDom);
        let _this = this;
        if (allLiDom && allLiDom.length > 0) {
          for (let i = 0; i < allLiDom.length; i++) {
            allLiDom[i].onclick = function () {
              // console.log("li的点击事件 监听的", i, newV[i].busiid);
               _this.$message({ message: "温馨提示：文件下载之中", type: "success" });
              if (newV && newV.length > 0) {
                let obj = {
                  busiid: newV[i].busiid,
                  filename: newV[i].filename,
                };
                requestDown({
                  url: "/eap/downloadSingle",
                  method: "get",
                  responseType: "blob",
                  params: {
                    ...obj,
                  },
                }).then((res) => {
                  let link = document.createElement("a");
                  //ArrayBuffer 转为 Blob
                  let blob = new Blob([res]);
                  link.style.display = "none";
                  link.href = URL.createObjectURL(blob);
                  if ("msSaveOrOpenBlob" in navigator) {
                    window.navigator.msSaveOrOpenBlob(blob, obj.filename);
                  } else {
                    link.setAttribute("download", obj.filename);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                  }
                });
              }
            };
          }
        }
        this.uploadAllFile = newV;
        this.$emit("uploadAllFile", this.uploadAllFile);
      },
      deep: true,
    },
  },
  created() {
    this.uploadAllFile = deepCopy(this.uploadAllFile, this.uploadFile);
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (this.lowApplyStatus === "0" || val === "1") {
        this.isDisable = false;
      } else {
        this.isDisable = true;
      }
      if (this.uploadFile && this.uploadFile.length > 0) {
        let dom = document.querySelector(".el-upload-list");
        // console.log('初始化的dom', dom);
        let html = this.uploadFile.map((item) => {
          return `
            <li tabindex="0" class="el-upload-list__item is-ready" data-busiid="${item.busiid}" data-filename="${item.filename}">
              <a class="el-upload-list__item-name"><i class="el-icon-document"></i>${item.filename}</a>
              <label class="el-upload-list__item-status-label"><i class="el-icon-upload-success el-icon-circle-check"></i></label>
              <i class="el-icon-close el-icon-close-extar" data-id="${item.id}"   ></i>
              <i class="el-icon-close-tip">按 delete 键可删除</i>
            </li>
          `;
        });
        dom.innerHTML = html;
        let _this = this;
        // 给 X 添加删除事件
        let allDom = document.querySelectorAll(".el-icon-close-extar");
        if (allDom && allDom.length > 0) {
          for (let i = 0; i < allDom.length; i++) {
            allDom[i].onclick = function (event) {
              event.stopPropagation();
              if (!_this.isDisable) {// 不是禁用状态的时候 有删除
                // console.log('i', i,"allDom",allDom[i].dataset.id);
                if (_this.uploadAllFile && _this.uploadAllFile.length > 0) {
                  _this.uploadAllFile = _this.uploadAllFile.filter((item) => {
                    return item.id != allDom[i].dataset.id;
                  });
                  // console.log("删除后的", _this.uploadAllFile);
                  dom.removeChild(allDom[i].parentNode);
                  _this.$message({ message: "删除文件成功", type: "success" });
                }
              } else {
                _this.$message({
                  message: "温馨提示：禁用状态，不可删除",
                  type: "warning",
                });
              }
            };
          }
        }
        // 给当前 li 添加下载功能
        let allLiDom = document.querySelectorAll(".el-upload-list li");
        if (allLiDom && allLiDom.length > 0) {
          for (let i = 0; i < allLiDom.length; i++) {
            allLiDom[i].onclick = function () {
              // console.log("点击事件",allLiDom[i].dataset.busiid);
              _this.$message({ message: "温馨提示：文件下载之中", type: "success" });
              let obj = {
                busiid: allLiDom[i].dataset.busiid,
                filename: allLiDom[i].dataset.filename,
              };
              requestDown({
                url: "/eap/downloadSingle",
                method: "get",
                responseType: "blob",
                params: {
                  ...obj,
                },
              }).then((res) => {
                let link = document.createElement("a");
                let blob = new Blob([res]);
                link.style.display = "none";
                link.href = URL.createObjectURL(blob);
                if ("msSaveOrOpenBlob" in navigator) {
                  window.navigator.msSaveOrOpenBlob(blob, obj.filename);
                } else {
                  link.setAttribute("download", obj.filename);
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link);
                }
              });
            };
          }
        }
      }
    },
    //上传文件，获取文件流
    handleFileChange(file, fileList) {
      this.file = file.raw;
      // 创建表单对象 用于数据的格式  + 用于添加流文件！
      let formData = new FormData();
      formData.append("files", this.file);
      let obj = {
        ...this.file,
        _t: Date.parse(new Date()) / 1000,
      };
      let sign = postSign(obj);
      formData.append("sign", sign);
      formData.append("_t", obj._t);
      formData.append("uid", this.file.uid);
      axios
        .post(baseUrl + "/eap/uploadFile", formData, {
          headers: {
            From: "cmas-ui",
            "Content-Type": "multipart/form-data",
            Token: JSON.parse(sessionStorage.getItem("token")),
          },
        })
        .then(({ data }) => {
          // console.log("上传文件data", data.dat);
          if (data.code == 0) {
            file.busiid = data.dat[0].busiid;
            this.uploadAllFile.push(data.dat[0]);
            this.$message({ type: "success", message: "上传文件成功" });
          } else {
            let dom = document.querySelector(".el-upload-list");
            let donChildObj = dom.childNodes;
            dom.removeChild(donChildObj[donChildObj.length - 1]);
            this.uploadAllFile.pop();
            this.$message({ type: "error", message: "上传文件失败" });
          }
        });
    },

    // 删除文件
    removeFile(file) {
      // console.log("移除文件", file);
      if (file.busiid) {
        removeFileGet(file.busiid).then(({ data }) => {
          if (data.code == 0) {
            this.$message({ type: "success", message: "删除文件成功" });
          } else {
            this.$message({ type: "error", message: data.dat });
          }
        });
        this.uploadAllFile = this.uploadAllFile.filter((item) => {
          return item.busiid != file.busiid;
        });
        // this.$message({ type: "success", message: "删除文件成功" });
      }
    },
  },
};
</script>
<style  lang="scss" scoped>
.upload_file {
  // position: relative;
  // top: -15px;
  padding-top: 5px;
  background: #fff;
  .upload_file_title {
    float: left;
    text-align: right;
    width: 110px;
    height: 40px;
    line-height: 40px;
  }
  .upload_file_btn {
    position: relative;
    float: left;
  }
  .upload_file_tip {
    position: absolute;
    top: 35px;
    left: 0px;
    width: 80px;
    height: 49px;

    div {
      font-size: 12px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #b9bcc5;
      line-height: 14px;
    }
  }
}
::v-deep .el-button--small {
  padding: 6px 16px !important;
}
::v-deep .el-upload-list {
  position: relative;
  left: 100px;
  top: -34px;
  width: 640px;
  // background: #000;
  clear: both;
  li {
    float: left;
    width: 33% !important;
  }
  .el-upload-list__item {
    margin-top: 10px !important;
  }
}
.disableBtn {
  cursor: not-allowed;
}
</style>

vue 之 ele上传文件与下载文件 方式2

<template>
  <div class="upload_file clear_fix">
    <div class="upload_file_title">{{ title }}</div>
    <div class="upload_file_btn">
      <el-form :model="uploadForm" onsubmit="return false">
        <el-form-item label="">
          <el-upload
            action=""
            :file-list="fileList"
            :before-upload="beforeUpload"
            :http-request="fnUploadRequest"
            :on-remove="removeFile"
            :on-preview="previewFile"
            accept=".doc,.docx,.ppt,.pptx,.xls,.xlsx,.pot,.pps,.vsd,.rtf,.wps,.et,.dps,.pdf,.txt,.7z,.rar,.zip"
            multiple
            ref="uploadForm"
          >
            <el-button
              size="small"
              type="primary"
              slot="trigger"
              :disabled="isDisable"
              >选取文件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="upload_file_tip">
        <div>支持格式：</div>
        <div>jpg、png、</div>
        <div>docx、xlsx等</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "@/utils/request.js";
import { postSign } from "@/utils/sign.js";
import {
  removeFileGet,
} from "@/api/creditManagement/singleAdd/singleAdd.js";
import { deepCopy } from "@/utils/createTool.js";
import requestDown from "@/utils/requestDown";
export default {
  name: "UploadFileEdit",
  components: {},
  props: {
    uploadFile: {
      type: Array,
      default() {
        return [];
      },
    },
    lowApplyStatus: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      title: "上传文件：",
      fileList: [],
      uploadForm: {},
      file: {}, // 上传文件
      uploadAllFile: [],
      isDisable: false, // 是否禁用
    };
  },
  watch: {
    uploadAllFile: {
      handler(newV) {
        this.uploadAllFile = newV;
        this.$emit("uploadAllFile", this.uploadAllFile);
      },
      deep: true,
    },
  },
  created() {
    this.uploadAllFile = deepCopy(this.uploadAllFile, this.uploadFile);
  },
  mounted() {
    this.init();
  },
  methods: {
    // 上传前的 文件名判断
    beforeUpload(file){
      let testReg = file.name.substring(0,file.name.lastIndexOf('.'));
      console.log('testReg',testReg);
      let reg = /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      // console.log('res', reg.test(testReg));
      let bool = false;
      if ( reg.test(testReg) ) {
        bool = true;
      } else {
        this.$message({ type: "error", message: "温馨提示：文件名仅支持：中文、英文、数字及下划线" });
        bool = false;
      }
      // console.log('bool',bool);
      return bool;
    },
    // 上传图片
    fnUploadRequest(file,fileList) {
      // console.log(file);
      try {
        this.file = file.file;
        // 创建表单对象 用于数据的格式  + 用于添加流文件！
        let formData = new FormData();
        formData.append("files", this.file);
        let obj = {
          ...this.file,
          _t: Date.parse(new Date()) / 1000,
        };
        let sign = postSign(obj);
        formData.append("sign", sign);
        formData.append("_t", obj._t);
        formData.append("uid", this.file.uid);
        axios
          .post(baseUrl + "/eap/uploadFile", formData, {
            headers: {
              From: "cmas-ui",
              "Content-Type": "multipart/form-data",
              Token: JSON.parse(sessionStorage.getItem("token")),
            },
          })
          .then(({ data }) => {
            console.log("上传文件data", data.dat);
            if (data.code == 0) {
              file.busiid = data.dat[0].busiid;
              this.uploadAllFile.push(data.dat[0]);
              this.$message({ type: "success", message: "上传文件成功" });
              file.name = data.dat[0].filename;
            } else {
              this.$message({ type: "error", message: data.dat });
            }
          });
      } catch {
        this.$message({ type: "error", message: "事实是事实" });
      }
    },
    // 上传文件的数据回显
    init() {
      if ( this.lowApplyStatus === "0" ) {
        this.isDisable = false;
      } else {
        this.isDisable = true;
      }
      let uploadFile = [];
      for (var index = 0; index < this.uploadFile.length; index++) {
        uploadFile.push({
          busiid: this.uploadFile[index].busiid,
          name: this.uploadFile[index].filename,
        });
      }
      console.log('回显uploadFile',uploadFile);
      this.fileList = uploadFile;
    },
    // 删除文件
    removeFile(file) {
      if (file.busiid) {
        removeFileGet(file.busiid).then(({ data }) => {
          if (data.code == 0) {
            this.$message({ type: "success", message: "删除文件成功" });
          } else {
            this.$message({ type: "error", message: data.dat });
          }
        });
        this.uploadAllFile = this.uploadAllFile.filter((item) => {
          return item.busiid != file.busiid;
        });
      }
    },
    // 已经上传成功的 文件 可添加下载功能
    previewFile(file){
      console.log('已经上传的 可以实现点击下载文件', file);
      let obj = {
        busiid: newV[i].busiid, // uid 需要使用
        filename: newV[i].filename,
      };
      requestDown({
          url: "/eap/downloadSingle",
          method: "get",
          responseType: "blob",
          params: {
            ...obj,
          },
        }).then((res) => {
          let link = document.createElement("a");
          let blob = new Blob([res]);
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          if ("msSaveOrOpenBlob" in navigator) {
            window.navigator.msSaveOrOpenBlob(blob, obj.filename);
          } else {
            link.setAttribute("download", obj.filename);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          }
        });
    }
  },
};
</script>
<style  lang="scss" scoped>
.upload_file {
  padding-top: 5px;
  background: #fff;
  .upload_file_title {
    float: left;
    text-align: right;
    width: 110px;
    height: 40px;
    line-height: 40px;
  }
  .upload_file_btn {
    position: relative;
    float: left;
  }
  .upload_file_tip {
    position: absolute;
    top: 35px;
    left: 0px;
    width: 80px;
    height: 50px;

    div {
      font-size: 12px;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #b9bcc5;
      line-height: 15px;
    }
  }
}
::v-deep .el-button--small {
  padding: 6px 16px !important;
}
::v-deep .el-upload-list {
  position: relative;
  left: 100px;
  top: -34px;
  width: 640px;
  // background: #000;
  clear: both;
  li {
    float: left;
    // width: 33% !important;
    width: 50% !important;
  }
  .el-upload-list__item {
    margin-top: 10px !important;
  }
}
.disableBtn {
  cursor: not-allowed;
}
</style>
小小liang
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE + java 文件下载
03-29
前端vue，后端java。 如果前端是其他语言，可自行转换。 实现在浏览器前端点击后的文件下载。 不是整个工程代码，只把涉及到下载用的前端的代码和后端的代码贴出来了，可以直接复制使用，有详细的步骤。 包含了前端在执行post请求的关键的参数哦！responseType: "blob"
element 导入导出，下载导入模板电子表格，vue实现
qq_40798486的博客
12-31 870
红色红色方块内是要实现的功能 HTML代码（均为element标签） <div class="done" @click="download"> <a >下载导入模板</a> </div> <div class="leading-out"> <el-button type="info" @click="exportBtn">
vue+element实现excel的导入、导出
dancer_mm的博客
10-11 2306
vue+element实现excel的导入 1.安装 npm install -S file-saver xlsx npm install -D script-loader 2.element 上传控件 <el-upload :on-exceed="handleExceed" :file-list="fileList" style="tex...
vue中，Upload上传组件el-upload的使用-zip格式，大小不超过10M & store中获取和保存token
weixin_44867717的博客
06-05 2171
上传功能
vue下载文件（excel）
weixin_46533954的博客
12-09 739
vue中下载后端返回的文件流或者网址 首先调用接口的方法 我这个是把接口地址单独拿出来 这是定义在公共方法中，在main.js就引入的js文件 export function downLoad(url){//post的时候参数就是（url,data）第二个是请求体 return newPromise((resolve,reject)=>{ axios({ method:'get',//post(根据规定的方法get或者post) url:dom
elementui+vue管理后台-文件上传下载与预览
xwc999
12-13 3057
【代码】elementui+vue管理后台-文件上传下载与预览。
前端：下载文件(多种方法)
热门推荐
snowball的博客
09-03 1万+
a href="https://abc.png" download="abc.png" target="view_window">下载前端经常会有下载文件的需求，这里总结了几种常用的方法，方便日后查看。四、location.href。
前后端分离，文件上传下载（springBoot+vue+elementUI）
qiuxinfa123的博客
05-04 1万+
文件上传与下载是比较常见的功能，比如上传附件和头像等等，本篇博客主要讲前后端分离的情况下，如何实现文件上传下载，写的是demo，完整功能可参考springBoot+shiro+vue的学生管理系统（二、总体功能及登录功能），新增文件上传下载的功能，都是在它的基础之上完成的。这里会用到elementUI的组件： el-upload 一、文件上传： 先看前端代码： （1）利...
springboot+vue实现文件上传下载
01-18
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下 一、文件上传（基于axios的简单上传） 所使用的技术：axios、springboot、vue; 实现思路：通过h5 ：input元素标签进行...
springboot整合vue实现上传下载文件
08-25
主要为大家详细介绍了springboot整合vue实现上传下载文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现点击按钮下载文件功能
10-16
主要介绍了vue中点击按钮下载文件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue+element实现大文件上传
07-04
vue+element实现大文件上传
对于前端下载文件流
passworld132的博客
05-17 81
ele.setAttribute('download', '导出文件.xlsx');接收文件流>转new Blob>利用a标签下载。
elementUI 的文件上传支持word、Excel文件，且做了文件类型和大小的限制（多文件上传）
qq_37764878的博客
08-31 4935
elementUI 的文件上传支持word、Excel文件，且做了文件类型和大小的限制（多文件上传）
vue3+element-plus上传文件，预览文件
weixin_42255789的博客
01-17 1万+
vue3+element-plus上传文件，预览文件
ele上传文件(vue)
m0_53912016的博客
10-27 445
【代码】ele上传文件(vue)
Electron构建下载文件桌面应用
QD的博客
03-28 7853
做这个真的要疯掉，但是开始了就要做出来。 下面就说一下整个过程吧，因为真的查阅了不少资料，发现似乎没几个桌面应用会选择做下载文件的，所以需要一直查资料查资料，查到要疯掉。 进入正题初识electronelectron文档：https://github.com/electron/electron 文档里面有中文的，所以还是蛮容易理解的。 文档主要就是介绍electron项目的结构如下：
前端下载文件的几种方式
HuangZeJunXXX的博客
11-03 5901
一、a标签实现文件下载 1、获取下载的文件 $.ajax({ url:“get-file”, type:“get”, dataType:‘JSON’ }).then(function(res){ //获取到从后台响应的数据 console.log(res); }) 通过a标签实现下载的数据格式为：下载文件的url地址，所以从后台获取数据时得到的是url格式 与后台的交互方式为 ：ajax、get等...
vue之排班日历的 实现
weixin_47409897的博客
04-15 8254
这里写自定义目录标题vue之排班日历的 实现index.vue排班日历组件 calendar.vuecalendar.js vue之排班日历的 实现 查询日期和数据，展示对于的排班日历，蓝色为高亮区，代表排班的日期 index.vue <template> <div class="inspect_schedule_page repair_page spotCheck-page" v-cloak> <div class="content"> &l
使用vue实现文件上传和下载功能
最新发布
05-19
文件上传和下载是 Web 开发中常用的功能之一，Vue.js 作为前端框架，可以很方便地实现这些功能。下面是一个简单的示例： ## 文件上传 首先，我们需要在 Vue 组件中定义一个表单，让用户可以选择要上传的文件： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值