vue+elementUI实现上传下载文件、图片

最新推荐文章于 2024-01-10 14:10:02 发布

不想上班第N天

最新推荐文章于 2024-01-10 14:10:02 发布

阅读量1.4k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/aiiiszrh/article/details/125947038

版权

这是一个关于前端上传和下载功能的实现示例。组件使用了Element UI，包括一个输入框和上传按钮，支持多文件上传、限制上传数量，并提供文件预览、移除和下载功能。上传成功后，文件地址会自动填充到输入框中，用户可以点击下载按钮进行文件下载。

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

<!--添加/编辑-->
<template>
  <div class="edit_container">
    <el-form
      :model="userForm"
      :rules="userRules"
      ref="updatePage"
      label-width="120px"
      class="edit_form"
    >
      <!--附件地址-->
      <el-form-item :label="tableHeader.AttAdress" class="form_field" prop="AttAdress">
        <div style="display: flex">
          <el-input v-model.trim="userForm.AttAdress" disabled clearable ></el-input>
          <el-upload
            class="upload-demo"
            :action="getAction"
            :headers="headersObj"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>

    <el-button @click="donwload">下载</el-button>
  </div>
</template>
<script>
import {FileDownload} from '@/api/WMSCommonApi'
export default {
  name: "portlet_update",
  props: {},
  data() {
    return {
      headersObj: { Authorization: this.$store.getters.token },
      fileList: [],
      getAction: process.env.VUE_APP_BASE_API_WMS + "aaa?path=default", //上传接口
    };
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(val) {
      console.log(val);
      this.$message.success("上传成功");
      this.userForm.AttAdress = val.toString();
    },

    // 下载
    download(val) {
      var index = val.AttAdress.lastIndexOf("."); //获取.后边的字符串
      let obj = val.AttAdress.substring(index + 1, val.AttAdress.length); //文件类型不一样，截取要下载文件后缀
      FileDownload({ filePath: val.AttAdress }) .then((res) => {
          const content = res;
          const blob = new Blob([content]); // 接口返回的数据，依实例而行
          var fileName = "";
          fileName = val.AttName + "." + obj; // 文件名+后缀
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob); // 文件流生成的url
          document.body.appendChild(elink);
          elink.click(); // 模拟在按钮上实现一次鼠标点击
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink); // 移除 a 标签
          this.btnName = this.commonBtnName.cmdDownloadTemplate;
          this.downloadLoading = false;
        })
        .catch(() => {
          this.btnName = this.commonBtnName.cmdDownloadTemplate;
          this.downloadLoading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/ .el-upload {
  height: 0;
  line-height: 0;
  button {
    padding: 6px 10px;
  }
}
</style>