ant design 上传自定义方法 axios

1,ant design的上传方法自己的action常常不好用,因此自定义自己方法来上传

html

<a-upload-dragger
          :customRequest="customRequest"
          :fileList="fileList"
          :multiple="true"
:remove="removeFile"
        />

js

//重写上传方法
    customRequest(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      this.$http.post("dataSetFile/addDataSetFile", formData).then(res => {
        this.fileList.push({
          uid: res.data, // 文件唯一标识,建议设置为负数,防止和内部产生的 id 冲突
          name: data.file.name, // 文件名
          status: "done", // 状态有:uploading done error removed
          response: res // 服务端响应内容
        });
      });
    },
//删除文件
    removeFile(file) {
      this.fileList.splice(this.fileList.indexOf(file), 1);
    },

这样就可以用自己的方法来上传啦!

 
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Pro 中,可以通过使用 Upload 组件来实现文件上传的功能。如果需要自定义上传并且需要回调函数,则可以在 Upload 组件中使用 `customRequest` 属性来自定义上传行为,并且可以在这个函数中进行上传成功或失败的回调。 下面是一个示例代码: ```jsx import { Upload, message } from 'antd'; function handleUpload(options) { const { onSuccess, onError, file } = options; // 这里可以自定义上传行为,例如使用 axios 发送请求 // 如果上传成功,调用 onSuccess 回调函数,并传入返回的数据 // 如果上传失败,调用 onError 回调函数,并传入错误信息 if (上传成功) { onSuccess(返回的数据); } else { onError(错误信息); } } function MyUploadComponent() { return ( <Upload customRequest={handleUpload} onChange={(info) => { if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { message.success(`${info.file.name} 上传成功`); } else if (info.file.status === 'error') { message.error(`${info.file.name} 上传失败`); } }} > {/* 这里可以添加上传按钮 */} </Upload> ); } ``` 在上面的代码中,我们定义了一个名为 `handleUpload` 的函数来自定义上传行为。在这个函数中,我们可以使用自己的上传逻辑,并根据上传结果调用 `onSuccess` 或 `onError` 回调函数。在 `MyUploadComponent` 组件中,我们将 `handleUpload` 函数赋值给了 `customRequest` 属性,这样就可以使用自定义上传行为了。同时,我们还在 `onChange` 事件中添加了处理函数,用来处理上传结果并显示提示信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值