axios通过formData上传文件，然后在下载文件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了axios通过formData上传文件，然后在下载文件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2454字，纯文字阅读大概需要4分钟。

内容图文

最近在做项目的时候，有一个批量上传内容的需求，上传的是一个excel文档。返回值也是一个Excel文档。

我这边之前的做法是直接搞个表单，把相关的字段填好，发送就可以了。

但是其实这是从一个弹窗里面submit的，使用表单的话，就监控不到上传的进度，也就不知道啥时候关闭弹窗，于是产品就问了，这个怎么解决呀，我是等了三秒后直接关闭，但是这样子感觉很low，就想能不能通过ajax来做呢，下面是表单的写法

 <form ref="uploadForm" :action="actionUrl" method="post" enctype="multipart/form-data" v-if="operator">
        <label for="upfile" class="pTitleRight">
          <span>Content</span>
          <el-button type="primary" @click="clickHandle">Upload File</el-button>
          <span>{{fileName}}</span>
          <input ref="filElem" type="file" id="upfile" name="file" style="display: none;" @change="upload" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
        </label>
        <input type="text" name="zone" value="sa" hidden>
        <input type="text" name="operator" :value="operator.name" hidden>
        <input type="text" name="userId" :value="operator.id" hidden>
    </form>

下面是ajax的写法了，

重要的是需要设置返回的类型，选择blob，这样就可以构造a标签来自动下载了。

 submit() {
        this.loading = true;
        const formData = new FormData();
        formData.append('file', this.file);
        formData.append('zone', 'sa');
        formData.append('operator', this.operator.name);
        formData.append('userId', this.operator.id);
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
          withCredentials: true,
          responseType: 'blob',
        };
        const fileName = 'import_sbcms_result';
        axios.post(this.actionUrl, formData, config).then((res) => {
          this.loading = false;
          this.close();
          this.$emit('addSuccess');
          this.$refs.filElem.value = '';
          const blob = res.data;
          // 如果size小于100,一般是报错了
          if (blob.size < 100) {
            const reader = new FileReader();
            reader.readAsText(res.data, 'utf-8');
            reader.onload = (e) => {
              this.$message({
                showClose: true,
                message: JSON.parse(e.target.result).message,
                type: 'error',
              });
            };
            return;
          }
          if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveBlob(blob, fileName);
          } else {
            const downloadLink = window.document.createElement('a');
            // const contentTypeHeader = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
            const contentTypeHeader = res.headers['content-type'];
            downloadLink.href = window.URL.createObjectURL(new Blob([blob], { type: contentTypeHeader }));
            downloadLink.download = fileName;
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
          }
        }).catch((e) => {
          this.$message.error(e);
        });

 

内容总结

以上是互联网集市为您收集整理的axios通过formData上传文件，然后在下载文件全部内容，希望文章能够帮你解决axios通过formData上传文件，然后在下载文件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---