前端文件上传下载🪓

文件上传

在项目中，我们经常会用到上传、下载功能，为了方便学习，写下这篇博客，加深印象

下载Excel模板

• 假如Excel模板存放在前端，需要将模板存放在vue目录下的public中，因为这个打包不会被编译；如果存放在后端，那就用链接下载，代码如下：

     // 下载excel模板
    appDownload() {
      // 后端下载
      // downloadImportPerson().then((res) => {
      //   if (res.code === 2000) {
      //     window.location.href =
      //       request.defaults.baseURL + "/person" + res.data;
      //   }
      // });
      // 前端下载
      axios
        .request({
          //直接填写public下的路径即可，编译时会自动定位到public文件夹下
          url: "/excel/usermsg/人员信息表.xlsx",
          method: "get",
          //设置axios请求的responseType为blob
          responseType: "blob",
        })
        .then((res) => {
          //构造一个a标签
          let url = window.URL.createObjectURL(res.data);
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          //设置a标签的下载动作和文件名，并将标签加入body中
          link.setAttribute("download", "人员信息表.xlsx");
          document.body.appendChild(link);
          //模拟点击
          link.click();
          this.$message.success("模板下载成功");
        })
        .catch((err) => {
          this.$message.error("模板下载错误");
        });
    },

上传Excel

• 获取到上传的Excel，用formData格式转化，再提交给后端，代码如下：

   uploadFile(item) { 
      // 转化格式
      this.beforeAvatarUpload(item);
      let formData = new FormData();
      let file = item.raw;
      formData.append("file", file);
      this.formData = formData; //formData为要给后端的数据
    },

• 如果上传图片时，我们对图片大小及格式有要求，可以使用以下代码： 在el-upload组件中，增加属性：:before-upload="beforeAvatarUpload"

    // 校验图片格式大小
    beforeAvatarUpload(file) {
      this.files = file.raw;
      const extension = file.name.split(".")[1] === "png";
      const extension2 = file.name.split(".")[1] === "jpg";
      const extension3 = file.name.split(".")[1] === "jpeg";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: "上传照片只能是png、jpg、jpeg格式！",
          type: "error",
        });
        this.$refs.upload.clearFiles();

        return false;
      }
      if (!isLt2M) {
        this.$message({
          message: "上传模板大小不能超过5MB！",
          type: "error",
        });
        this.$refs.upload.clearFiles();

        return false;
      }
      return extension || extension2 || extension3; //必须要有返回值
    },

• 如果上传图片时，我们对图片转Base64格式，可以使用以下代码： 在el-upload组件中，增加属性：:on-change="uploadFile"

   uploadFile(file, fileList) {
      this.formData.pictureName = file.name;
      this.beforeAvatarUpload1(file);
      // 转base64
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = () => {
        this.formData.pictureBase64Str = reader.result;
      };
      reader.onerror = function (error) {};

      let formData = new FormData();
      formData.append("file", reader.result);
      this.formData1.pictureBase64Str = formData;
    },

• 如果上传压缩包时，我们对上传类型做判断和大小，可以使用以下代码： 在el-upload组件中，增加属性：:on-change="beforeAvatarUpload"

   // 校验压缩文件格式大小
    beforeAvatarUpload2(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isLt2M = file.size / 1024 / 1024 < 150;
      // 判断文件名的类型
      // let that =this
      if (fileType === "zip") {
        let existFile = fileList
          .slice(0, fileList.length - 1)
          .find((f) => f.name === file.name);
        if (existFile) {
          this.$message.error("当前文件已经存在!");
        }
        this.fileList = fileList;
      } else {
        this.$message.error("上传模板只能是zip格式!");
        return;
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过150MB！",
          type: "error",
        });
        return false;
      }
    },

导出Excel

• 导出其实就是个链接，主要看后端怎么让你处理，我们这边导出链接如下：

    // 导出excel
    exportExcel() {
      //data，type为参数，看项目接口灵活配置
      let type = "getPersonList";
      let data = {
        objects: [],
      };
      exportExcel(data, type).then((res) => {
        if (res.code == 2000) {
          window.location.href =
            request.defaults.baseURL + "/person" + res.data;
        }
      });
    },

ElementUI el-upload上传 文件缩略图 删除

• 支持预览，下载，删除

代码如下：

js部分

 handleRemove(file) {
    // 当前上传图片总数
    const uploadFiles = this.$refs.picUpload.uploadFiles;
    console.log(uploadFiles);
    for (let i = 0; i < uploadFiles.length; i++) {
      if (uploadFiles[i].url == file.url) {
        uploadFiles.splice(i, 1);
      }
    }
  },
  // 查看图片
  handlePictureCardPreview(file) {
    this.dialogImageUrl = file.url;
    this.dialogVisible = true;
  },
  handleDownload(file) {
    window.open(file.url)
  },
    

• 如需要设置图片格式，则在el-upload中增加accept属性，如下：

accept=".jpg,.png,.jpeg"

注意：如果在el-upload中设置了 :auto-upload="false" 属性，如果要判断图片等格式，则需要将el-upload的:before-upload属性替换为:on-change属性，因为选中文件不会触发上传事件，所以，before-upload设置后不起作用。

解决方法：将before-upload里面要写的内容放到on-change事件中去实现-------或是将:auto-upload="false"设置为true

代码如下