Ant Design <a-upload>上传时只有Uploading状态,无法获取服务器返回的数据

在使用Vue的AntDesign组件时,发现a-card的loading属性为true会导致a-upload上传文件时无法获取服务器返回数据。去掉loading属性后,上传功能恢复正常。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因: <a-card> 中的 loading属性值为true时, 导致<a-upload> 上传时只有Uploading状态,无法获取服务器返回的数据,需要去掉 loading属性即可。

<template>
  <div>
  <!-- <a-card :bordered="false" title="上传升级包" class="mb20" :loading="loading"  hoverable> -->
    <a-card :bordered="false" title="上传升级包" class="mb20"  hoverable>
      <a-form @submit="handleSubmit">
        <a-form-item
          label="文件"
          :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
        >
          <a-upload
            name="file"
            :showUploadList="false"
            :multiple="false"
            :headers="tokenHeader"
            :action="uploadAction"
            accept=".apk"
            @change="handleUpload"
          >
            <a-button type="primary"><a-icon type="upload" class="fs-14"></a-icon>选择文件</a-button>
            <span class="tips line-2em"> 选择XXX.apk,进行升级操作 </span>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<template> <a-modal title="新增Partner" :width="900" :visible="visible" :confirmLoading="confirmLoading" @ok="handleSubmit" @cancel="handleCancel" > <a-spin :spinning="confirmLoading"> <a-form :form="form" :rules="rules"> <a-form-item label="编码" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-input placeholder="请输入编码" v-decorator="['code', {rules: [{required: true, message: '请输入编码!'}]}]" /> </a-form-item> <a-form-item label="名称" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-input placeholder="请输入名称" v-decorator="['name', {rules: [{required: true, message: '请输入名称!'}]}]" /> </a-form-item> <a-form-item label="logo" prop="logo" :rules="{required:true,validator:this.uploadLogoChange,trigger: 'change'}" :required="true" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-upload :customRequest="customRequest" :beforeUpload="beforeUpload" :multiple="false" :showUploadList="false" :fileList="logo" acccept="image/*" maxCount="1"> <a-button> <a-icon type="upload" /> 上传logo </a-button> </a-upload> </a-form-item> <a-form-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-input placeholder="请输入网址" v-decorator="['url', {rules: [{required: true, message: '请输入网址!'}]}]" /> </a-form-item> <a-form-item label="描述" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-input placeholder="请输入描述" v-decorator="['description', {rules: [{required: true, message: '请输入描述!'}]}]" /> </a-form-item> <a-form-item label="product" :rules="{required:true,validator:this.uploadProductChange,trigger: ['change']}" :required="true" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-upload :customRequest="customRequest" :beforeUpload="beforeUpload" :multiple="false" :showUploadList="false" :fileList="product" acccept="image/*" maxCount="1"> <a-button icon="up-circle">上传product</a-button> </a-upload> </a-form-item> <a-form-item label="分类" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-radio-group v-decorator="['clasIndustries',{rules: [{ required: true, message: '请选择分类' }], initialValue: '1'}]"> <a-radio-button v-for="(item,index) in typeDictTypeDropDown" :key="index" :value="item.code"> {{ item.value }}</a-radio-button> </a-radio-group> </a-form-item> <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序" > <a-input-number placeholder="请输入排序" style="width: 100%" v-decorator="['sort', { initialValue: 100 }]" :min="1" :max="1000" /> </a-form-item> <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback > <a-textarea :rows="4" placeholder="请输入备注" v-decorator="['remark']"></a-textarea> </a-form-item> </a-form> </a-spin> </a-modal> </template> <script> import { sysPartnerAdd } from '@/api/modular/system/partnerManage' import { sysDictTypeDropDown } from '@/api/modular/system/dictManage' export default { data () { return { labelCol: { xs: { span: 24 }, sm: { span: 5 } }, wrapperCol: { xs: { span: 24 }, sm: { span: 15 } }, rules: {}, logo: [], product: [], typeDictTypeDropDown: [], visible: false, confirmLoading: false, form: this.$form.createForm(this) } }, methods: { // 初始化方法 add (record) { this.sysDictTypeDropDown() this.visible = true }, sysDictTypeDropDown() { sysDictTypeDropDown({ code: 'language' }).then((res) => { this.typeDictTypeDropDown = res.data }) }, beforeUpload(file, fileList) { this.confirmLoading = true }, customRequest({ file, onSuccess, onError }) { const formData = new FormData() formData.append('file', file) sysPartnerAdd(formData).then((res) => { if (res.success) { this.$message.success('上传成功') onSuccess(res) } else { this.$message.error('上传失败:' + res.message) onError(new Error(res.message)) } }).catch((error) => { this.$message.error('上传失败:' + error.message) onError(error) }).finally(() => { this.confirmLoading = false }) }, handleSubmit () { const { form: { validateFields } } = this this.confirmLoading = true validateFields((errors, values) => { if (!errors) { sysPartnerAdd(values).then((res) => { if (res.success) { this.$message.success('新增成功') this.visible = false this.confirmLoading = false this.$emit('ok', values) this.form.resetFields() } else { this.$message.error('新增失败:' + res.message) } }).finally((res) => { this.confirmLoading = false }) } else { this.confirmLoading = false } }) }, handleCancel () { this.form.resetFields() this.visible = false }, uploadLogoChange(rule, value, callback) { console.log(rule, value, callback) callback(this.logo.length ? undefined : '请上传文件') }, uploadProductChange(rule, value, callback) { if (this.product.length === 0) { callback(new Error('上传产品!')) } else { callback() } } } } </script> 代码中a-upload 必填校验
最新发布
07-25
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值