vue el-input文件导入 返回文件流怎么办?

话不多说,直接上示例:

//弹窗模式
<template>
  <div class="bm-container">
    <el-dialog title="导入" :visible.sync="addDialog" class="infoDialog addInfoDialog" :before-close="handleClose" append-to-body>
      <div class="form-box" style="display: flex">
        <div style="width: 100px;height: 35px;line-height: 35px;color: #333333;text-align: right;padding-right: 15px">文件:</div>
        <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :auto-upload="false"
            drag
            action="#"
            :on-change="(val)=>changeFile(val)"
            :disabled="upload.isUploading"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处,或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示:仅允许导入“.xlsx“或”.xls”文件!</div>
        </el-upload>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addFile} from "@/api/system/grid";
  export default {
    name: 'addInfo',
    props: {
      addDialog: { type: Boolean }
    },
    data() {
      return {
        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'}],
        uploadFileUrl: "http://122.225.221.35:8098/v1/searchExcel", // 上传的图片服务器地址
        headers: {
          'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundary5s6AwfrF0hT0skDD',
          // 'type': 'application/vnd.ms-excel',
          'accept': 'application/json',
          'z-token': localStorage.getItem("token")
        },
        formData:new FormData(),
        // form:{
        //   title:''
        // },
        // 用户导入参数
        upload: {
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
        },
      }
    },
    methods: {
      handleClose() {
        this.$emit('changeDialog', false);
      },
      // 上传前
      beforeUpload(file) {
        var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
        // 限制上传格式为图片
        // const isIMAGE = file.type === 'image/jpeg'||'image/gif'||'image/png';
        const extension = testmsg === 'xls' ||  'xlsx'
        const isLt2M = file.size / 1024 / 1024 < 10     //这里做文件大小限制
        if(!extension) {
          this.$message({
            message: '上传文件只能是 xls、xlsx格式!',
            type: 'warning'
          });
        }
        if(!isLt2M) {
          this.$message({
            message: '上传文件大小不能超过 10MB!',
            type: 'warning'
          });
        }
        return extension && isLt2M
      },
      // 文件上传成功处理
      handleFileSuccess() {//, file, fileList
        this.upload.isUploading = false;
      },
      // 上传失败
      handleUploadError() {
        console.log('上传失败')
      },
      changeFile (val) {
        //file是键,val.raw是要传的文件,val.name是要传的文件名
        this.formData.append('file', val.raw);
      },
      submitUpload(){
        var _self = this
        _self.$emit('changeDialog', false);
        // _self.$refs.upload.submit();
        addFile(_self.formData).then(response => {
          this.$message({
            type: 'success',
            message: '上传成功,正在下载文件'
          });
          let reader = new FileReader();
          reader.readAsDataURL(response);
          reader.onload = function(e){
            let a = document.createElement("a");  //创建一个a标签
            a.style.display = "none";
            a.download = "data.xls";   // 文件名称及类型,可以变成.word .zip 等等
            a.href = e.target.result;
            document.body.appendChild(a);  // 将a标签添加在body上
            a.click();                     // a标签上绑定一个点击事件
            document.body.removeChild(a);  // 下载完成之后删除a标签
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>

grid.js

import request from './request'

// 导入文件
export function addFile(data) {
  return request({
    url: '',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      'z-token': localStorage.getItem("token")
    },
    responseType:'blob'
  })
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值