Axios upload excel file All In One

Axios upload excel file All In One

post

application/x-www-form-urlencoded
multipart/form-data

post formData

axios.post( '/single-file', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    },
  },
).then(function(){
  console.log('SUCCESS!!');
})
.catch(function(){
  console.log('FAILURE!!');
});

upload component

https://zzk.cnblogs.com/my/s/blogpost-p?Keywords=upload+excel

    postUploadExcel(blob) {
      const {
        name,
        type,
        size,
        lastModified,
        lastModifiedDate,
        webkitRelativePath,
      } = blob;
      // const types = [".xlsx", ".xls", ".csv"];
      const types = ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
      const littleSize = Math.ceil(size / 1000) <= 500 ? true : false;
      const supportType = types.includes(type) ? true : false;
      const seatMapTemplateId = this.templateId;
      if (supportType) {
        this.isShowWarning = false;
        const formData = new FormData();
        formData.append('file', blob);
        // 😂 不需要 Content-Type， new FormData(), 已经自带了 `multipart/form-data`
        fetch(`/opapi/v2/seatMap/template/${seatMapTemplateId}/seatData`, {
          method: 'POST',
          // headers: {
          //   'Content-Type': 'application/x-www-form-urlencoded',
          // },
          // mode: 'cors',// no-cors
          // credentials: 'include',
          body: formData,
        })
        .then(res => res.json())
        .then(data => {
          const {
            data: url,
            success,
            errorHint,
            errorCode,
          } = data;
          if(success) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            this.updateURL(url || ``);
          } else {
            this.$message({
              message: `上传错误: ${errorCode}_${errorHint}`,
              type: 'error'
            });
          }
        })
        .catch(error => {
          this.$message({
            message: '上传错误',
            type: 'error'
          });
          console.error(error);
        });
      } else {
        this.isShowWarning = true;
        this.$message({
          type: 'info',
          message: '上传失败，请检查文件大小和类型!'
        });
      }
    },

https://element.eleme.io/#/zh-CN/component/upload

demos

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

https://github.com/axios/axios/issues/1660

https://stackoverflow.com/questions/52521274/use-axios-to-get-and-save-an-excel-file

https://serversideup.net/uploading-files-vuejs-axios/

https://www.pluralsight.com/guides/asynchronous-file-upload-react

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---