1.将文件流转Blob对象并动态创建a标签下载excel表格

 <el-button size="small" @click.stop="downloadTemplate"> <i class="el-icon-download" /> 模板下载</el-button>
   downloadTemplate () {
      let downloadName = '下载模板1.xlsx'	//文件名
      let params ={excelType:5}
      // 服务实例下载
      // let a = document.createElement('a');
      // let event = new MouseEvent('click');
      // a.download = '映射模板';
      // a.href = this.downloadUrl;
      // a.dispatchEvent(event);
      getTemplateOSE( params ).then(res => {
        if (res.status === 500) {
          this.$message.error(res.message);
          return
        }
        // 文件流下载
        let blob = new Blob([res], { type: "application/ms-excel;charset=utf-8" }); 
        const link = document.createElement('a'); //创建下载a标签
        link.href = URL.createObjectURL(blob);
        link.download = downloadName; //下载后文件名
        link.style.display = 'none'; //默认隐藏元素
        document.body.appendChild(link); // body中添加元素
        link.click(); // 执行点击事件
        URL.revokeObjectURL(link.href); //释放Blob对象
        document.body.removeChild(link);//下载完成后移除元素
      })
    },

2.文件自定义上传

         <el-upload
            class="upload_values"
            ref="upload"
            action
            :file-list="fileList"
            :on-change="fileStatusChange"
            :on-remove="handleRemove"
            :auto-upload="false"
            :limit="1"
            :http-request="defendFileUpload"
            accept=".xls,.xlsx"
          ></el-upload>

   // 自定义上传方法
    defendFileUpload (param) {
      this.isUploadLoding = true; // 确认按钮 loading
      let formData = new FormData();
      formData.append("file", param.file);
      // 有额外参数的时候 例如:uploadParams = { name: 'abcd' }
      if (uploadParams) {
        Object.keys(uploadParams).forEach(item => {
          formData.append("" + item + "", uploadParams[item]);
        })
      }
	// 通过进度条事件onUploadProgress获取上传文件的进度,显示进度信息
      const config = {
        onUploadProgress: (progressEvent) => {
          this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(2) > 0 ?
            (progressEvent.loaded / progressEvent.total * 100).toFixed(2) - 10 :
            (progressEvent.loaded / progressEvent.total * 100).toFixed(2))
        }
      }

      this.isShowProgress = true; // 显示上传进度条
      this.fileUploadMethods(formData, config).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.progressPercent = 100; // 上传成功之后进度条为100
          // this.fileUploadTips = response.message; //上传成功的提示
          this.textSheet = true;
          this.$refs.upload.clearFiles(); // 清空文件
          this.isAllowUpload = false; // 允许继续上传
          setTimeout(() => {
            this.close(); // 关闭弹窗
            this.$emit('refresh'); // 重载
          }, 500)
        } else {
          this.progressPercent = 0; // 重置进度条
          this.isShowProgress = false; // 隐藏上传进度条
          this.fileUploadTips = response.message; // 上传失败的提示
          this.textSheet = false; // false 为上传失败时的样式
        }
        this.isUploadLoding = false;
      }).catch(err => {
        this.progressPercent = 0; // 重置进度条
        this.isShowProgress = false; // 隐藏上传进度条
        this.fileUploadTips = '上传失败';
        this.textSheet = false;
        this.isUploadLoding = false;
      })
    },
 // 上传接口
    fileUploadMethods(data, config) {
      return request({
        url: '上传地址,例如"api/mdm/msd-business-unit/importBusinessUnitExcel"',
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data", //如果写成contentType会报错
        },
        onUploadProgress: config.onUploadProgress,
        data,
      });
    },

3.图片上传

主要贴出来上传图片的代码

      <el-upload
          action
          :class="{ upload_userImg: hideUpload, upload_zx: true }"
          ref="uploadUser"
          list-type="picture-card"
          :auto-upload="false"
          :file-list="userFileList"
          :on-change="userImgOnChange"
          :on-remove="userImgOnRemove"
          :limit="1"
          accept=".jpg, .png, .jpeg, .svg"
         >
          <i class="el-icon-plus"></i>
       </el-upload>
// 文件状态改变的回调
userImgOnChange (file, fileList) {
      let formData = new FormData();
      formData.append("file", file.raw);
      formData.append("dir", "porDir");
      this.employeePictureUpload(formData, "porDir");
    },

// 图片上传
    employeePictureUpload (formData, type) {
      infoMediaApi.uploadFileFTP(formData).then((res) => {
        if (res.status === 200) {
          if (type === "porDir") {
            // 照片
            this.form.employeePortraitUrl = res.data;
          }
          this.$message({
            type: "success",
            message: "上传成功",
          });
        }
      });
    },


// 图片上传接口
  uploadFileFTP (data) {
    return request({
      url: 'api/mdm/msd-file/uploadFileFTP',
      method: 'post',
      headers: {
        'Content-Type': 'multipart/form-data' // 如果写成contentType会报错
      },
      data
    })
  }
Logo

前往低代码交流专区

更多推荐