Ant Design上传插件，导入接口

原创已于 2022-02-17 17:23:14 修改 · 1.5k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #html

于 2021-09-15 13:55:14 首次发布

本文介绍了在Ant Design项目中如何不使用默认action属性，而是通过自定义方式调用上传文件接口的方法，详细展示了调用接口和接口实现的步骤，鼓励开发者保持学习状态。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

在项目中，上传文件时接口不想使用action，可以用到这个属性

<a-upload
	     name="file"
	     :multiple="true"
	     :headers="headers"
	     :showUploadList="false"
	     :beforeUpload="handleBeforeUpload"
	     :customRequest="customRequest" >
         <a-button type="primary" class="btnClass" style="margin: 0 10px;">导入</a-button>
 </a-upload>

在这里插入图片描述
调用接口时这样写

 // 自定义上传，自定义上传接口
      customRequest(file) {
         // file 是上传的文件 
         // 后端需要接受的参数是 formData数据，
         const form = new FormData();
         form.append('file', file.file);
         //这里的this.year是项目中需要传的参数
         uploadFile(this.year, form).then(res => {
            if(res) {
               this.$message.success('导入成功');
               //导入成功调查询接口
               this.getPlan();
            } else {
               this.$message.error('导入失败');
            }
         });
      },
     // 导入
      handleBeforeUpload: function(file) {
         //判断上传文件格式
         let extension = file.name.split('.')[1] === 'xls';
         let extension2 = file.name.split('.')[1] === 'xlsx';
         let tabName = file.name.split('.');
         let tabNames = tabName[0].substring(10,);
         let name =  '实际清算';
         return new Promise((resolve, reject) => {
            if(!extension && !extension2) {
               this.$message.warning('导入文件只能是 xls、xlsx格式!');
               reject(file);
            } else if(tabNames.indexOf(name) == -1) {
               this.$message.error(`请导入${name}`);
               reject(file);
            } else {
               this.$confirm({
                  title: `确定导入${name}吗？`,
                  onOk() {
                     resolve(file);
                  },
                  onCancel() {}
               });
            }
            resolve(file);
         });
      },

具体接口这样写

export function uploadFile(parameter,year) {
   return http({
      url:'/plan/yearly/import/historyInfo?year='+year,
      method: 'post',
      headers: { 'Content-Type': 'multipart/form-data' },
      data: parameter
   });
}