Ant-design: تحميل file.status قيد التحميل دائما

لا توجد مشكلة في اختباري الفعلي ، فهل من الملائم إعطاء الرمز الكامل للمشكلة لتسهيل إعادة الإنتاج؟

إعادة العنوان:
http://codepen.io/xiongying/pen/jAGRvx؟editors=0011

بالنسبة للوضع المتحكم فيه ، يجب عليك دائمًا تعيين حالة fileList في onChange للتأكد من مزامنة جميع الحالات مع التحميل. مشابهة للصياغة هنا: http://ant.design/components/upload/#components -upload-demo-fileList

// good

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

// bad

onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

يوصى بدراسة مفهوم المكونات الخاضعة للرقابة: https://facebook.github.io/react/docs/forms.html#controlled -components

لاحظ أنك تحتاج إلى استنساخ fileList للتأكد من أن التحميل يمكنه استشعار التغييرات في المصفوفة.

- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

لماذا أستخدم عنصر تحكم التحميل لفشل التحميل دائمًا والإبلاغ دائمًا عن خطأ: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (غير موجود)

كيفية إضافة حقول الهوية والرموز المميزة لعناوين URL المقيدة ، وكيفية استخدام الإجراءات لنقلها؟ العمل يعطي العنوان فقط ، لا يمكن إضافة البيانات؟

لا تزال هناك مشكلة في React.PureComponent لأن React.PureComponent قد قام بطبقة من أحكام التحسين. تحتوي قائمة الملفات على مراجع مخزنة مؤقتًا. إذا كان هو نفس الكائن ، فلن يتم تحديثه. يجب إنشاء كائن جديد على الفور في React.PureComponent.
handleChange = ({fileList}) => {
// علة ثابتة
this.setState ({fileList: fileList.slice ()}) ؛
}

@ afc163

yongningfu شكرا للموجه ، محدث.

تذكير خاص: عند استخدام React shouldComponentUpdate للمقارنة الضحلة ، في الوضع الخاضع للتحكم ، حتى لو تمت مزامنة الحالة مع التحميل ، فلن يتم تحديثها. والسبب هو أن المرجع مطابق === ، مما يمنع تصيير

بعد تحميل صور متعددة ، قبل أن يعيّن التحميل حد معلمة تحميل الصورة ، يحصل onChange على قائمة بالصور التي تم تحميلها بنجاح ، وبعد تحميل بعض الصور بنجاح ، سيؤدي تحميل صورة خاطئة إلى مسح جميع الصور التي تم تحميلها بنجاح من قبل ، هل هناك أي حل؟ ؟

عند معاودة الاتصال ، يجب إعادة تعيين الحالة ، مثل this.setState ({fileList}) ؛

handleChange = (معلومات) => {
console.log (معلومات) ؛

    //把fileList拿出来
    let {fileList} = info;

    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }

    //重新设置state
    this.setState( {fileList});
}

طالما أن onChange يتغير في الحالة ، فسيتم دائمًا استدعاء التحميل داخليًا ، أليس كذلك؟

لقد ظلت هذه المشكلة محفورة لفترة طويلة ، واتضح أنها حالة ثابتة. لا ينبغي تصميم المكونات على هذا النحو ، فلماذا الاعتماد على الحالة الخارجية الكسولة؟

أريد فقط كود base64 ولا أتفاعل مع الخلفية كيف أحل مشكلة إرسال الطلبات تلقائيًا إلى الخلفية؟

هل هو نحت رملي للحفاظ على هذا المكون؟

إذا فشل التحميل وأريد عرض الصورة الافتراضية السابقة ، فماذا أفعل؟

فشل التحميل. في وظيفة معالجة الأخطاء ، اتصل
this.setState ({
fileList: intial_list
})
يمكن عرض الصورة الافتراضية السابقة

أعتقد أنه قد تكون هناك مشكلة في توقيت تنفيذ رد الاتصال عند اكتمال تحميل المكون. حاول مراعاة هذا الموقف:

الكود الزائف لعلاقة المكون:

<Controller>
  <Upload fileList={controller.state.fileList} onUpload={controller.onUpload} />
</Controller>

تم إخطار المكون الرئيسي Controller لتحديث الحالة من خلال onUpload .

ولكن نظرًا لأن تحديث حالة React غير متزامن ، إذا كان تحميل الصورة سريعًا بدرجة كافية ، فسيظهر أمر التنفيذ على هذا النحو
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
في حالة تنفيذ upload.onSuccess ، لا يوجد ملف تم تحميله مطابق في حالة التحميل. لأن تحديث الرفع state.fileList يعتمد على componentWillReceiveProps .

لذلك ، أعتقد أن الوضع المتحكم فيه الحالي لهذا المكون غير موثوق به.

الحلول الممكنة:

1. في الوضع الخاضع للرقابة ، تم إجراء منطق المعالجة الفعلي onSuccess والأحداث الأخرى componentDidUpdate
2. تجنب state.fileList يعتمد كليًا على props.fileList ، ويحافظ على استقلال نسبيًا عن fileList (وليس حالة مثيل المكون .state مثيل المكون ، وسهولة معالجة تحميل الحدث

اسمح {file، fileList} = info؛
إذا (file.size / 1024/1024> 10) {
إرجاع
}
console.log (file.status)
إذا (file.status! = "تم") {
fileList = []
}
this.setState ({
قائمة الملفات ،
} ، console.log (
this.state.fileList،
this.props.form.getFieldValue ("تحميل")
))
当 我 添加

اسمح {file، fileList} = info؛
إذا (file.size / 1024/1024> 10) {
إرجاع
}
console.log (file.status)
إذا (file.status! = "تم") {
fileList = []
}
this.setState ({
قائمة الملفات ،
} ، console.log (
this.state.fileList،
this.props.form.getFieldValue ("تحميل")
))
عندما أضيف
إذا (file.status! = "تم") {
fileList = []
}
راقب التغيير مرة واحدة ، فقط قم بإزالته ، لماذا؟

هذه المشكلة لم تحل ، صحيح

استدعاء setState خلال دورة حياة componentWillReceiveProps لعرض الصورة لن يتغير

componentWillReceiveProps = (nextProps) => {
    this.setState(() => ({ 
      fileList: [...nextProps.fileList] 
    }));
  }  
// ...
<Upload FileList={this.state.fileList} ...>
//...

عندما يقوم مكون التحميل

PTGuan بالطبع ، يتم تحميل هذا المكون واحدًا تلو الآخر ، ويتم أيضًا استلام واجهة API الخلفية ملفًا واحدًا تلو الآخر. تحتاج إلى استدعاء التحميل بشكل متكرر في رد الاتصال بعد نجاح التحميل في التحميل على دفعات. نأمل في إنهاء سؤالك.

لم يتم حل هذه المشكلة +1

antd 3.8+ لا يزال لديه حالة فقط = حالة "تحميل" ولا توجد حالة تم إجراؤها ، كيف يتم حلها؟

هل يوجد حل رسمي للتحميل طوال الوقت ، ولكن يمكن لـ onSuccess انتظار استجابة http200 الصحيحة

تم حل المشكلة ، this.setState ({fileList: [... fileList]}) ؛ هذه الجملة مهمة جدًا ، يرجى التركيز عليها إذا كانت لديك مشاكل

EnixCoda ، يبدو أنني واجهت المشكلة التي وصفتها ، وأحيانًا أقوم بتحميلها وتظهر دائمًا "جارٍ التحميل".

withzhaoyu حسنًا ، في الواقع ، يواجه معظم الناس هنا هذه المشكلة. هذا المكون غير موثوق به لتخزين تقدم التحميل من خلال حالة React.

كيف حلها! ! ! ! ! ! ! ! ! ! تم الرفع

لقاء +1

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // 相关文件对象数据格式化处理
      return item;
    });
  }
   // 避免原来的文件丢失，这样子写就可以了
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// 上传进度可以通过onProgress中的percent来控制样式，而不是file.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

ما يجب القيام به طالما تقرأ الأساس 64 للملف دون التفاعل مع الخلفية

ههههههههههه

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}

<Upload
  onChange={this.handleAvatarChange}
/>

AngryPowman ، يمكنك تغليف مكون آخر بناءً على هذا المكون بنفسك ، وما الذي لا يمكن

اسأل هنا بشكل ضعيف ، هل تم تصميمه عمدًا بحيث لا يوفر الملف الذي تم تحميله حديثًا عنوان URL افتراضيًا؟

مضحك جدا. الآن لا تزال الحالة في قائمة الملفات قيد التحميل ، حتى إذا تم التحكم فيها ، ما زلت أضع الحالة على التحميل.لم تحل المشكلة على الإطلاق

عفوًا ، تم إرجاع علامة فشل تحميل الملف من النهاية الخلفية -> file.response.status. في هذا الوقت ، لم يتم اعتراض المكون. عندما وصلت إلى الانتهاء ، تم عرض قائمة الملفات. أريد مسح قائمة الملفات من خلال العلامة التي تم إرجاعها من النهاية الخلفية كيف افعلها؟

// صعدت إلى الحفرة ونظرت إلى الكود المصدري ووجدت أن المشاكل التي استخدمتها هي كما يلي
// 1. تسمية متغير الحالة
// سيئة

/*
这里为了方便 使用了与后端返回同样的字段 导致出了问题 这里必须用fileList，不然源码中 this.state.fileList获取是空 就会导致在onSuccess中匹配失败，从而不会在触发第二次onChange事件
*/
state = {imgList:[]} 
<Upload fileList={this.state.imgList} onChange={this.onFileChange} />

// البضائع

state = {fileList:[]} 
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

// 2. المعلمة onFileChange هي كائن (بما في ذلك سمتان للملف وقائمة الملفات) و this.setState ({fileList: [... fileList]}) ؛ يجب استدعاؤها في دالة onFileChange

state = {fileList:[]} 
onFileChange({file,fileList}) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

أي الإنجليزية بالصدفة؟ لدي هذه المشكلة ل.

developdeez ما مشكلتك؟ ما هو إصدار Ant Design الذي تستخدمه؟
لقد استخدمت AntD 3.0 من قبل وعملت على مكون التحميل هذا لبضعة أشهر. كل شيء سار بشكل جيد بالنسبة لي. لم يكن لدي أي مشاكل بقيت. لقد واجهت بعض المشكلات في البداية ولكنني أصلحت جميعها في النهاية. لذلك أنا واثق بما يكفي لحل جميع المشكلات المشتركة.

swordguard ، النملة

المشكلة في الأساس هي عدم القدرة على التحكم في قائمة ملفات واجهة المستخدم. أقوم بالتحميل والصورة وحاولت مسحها باستخدام زر ولا حظ.

لقد صنعت تذكرة هنا أيضًا مع بعض التعليمات البرمجية النموذجية: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

هل تمكنت من فعل هذا؟

في حالة حفرة +1 ، جربت this.setState({ fileList: [...fileList] }) دون جدوى ، تغييرات PureComponent إلى Component ولا يوجد فرق ، تتوقف الحالة فقط عند التحميل ما لم يتم وضع fileList في الدعائم ، من فضلك أسألك كثيرًا

في حالة حفرة +1 ، جربت this.setState({ fileList: [...fileList] }) دون جدوى ، تغييرات PureComponent إلى Component ولا يوجد فرق ، تتوقف الحالة فقط عند التحميل ما لم يتم وضع fileList في الدعائم ، من فضلك أسألك كثيرًا

يمكنك محاولة تعريف fileList كسلسلة ~~ == ~~
// دائما setState
this.setState ({fileList: JSON.stringify ([info.file])})؛

ههههههههههه

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}

<Upload
  onChange={this.handleAvatarChange}
/>

لم يتم حل هذه المشكلة. لا توجد سمة originFileObj في كائن الملف. هل تظهر هذه السمة بعد التحميل فقط؟ ولكن الآن لا توجد خطة للتحميل إلى الخلفية والحصول على محتوى base64 مباشرة.

this.setState({ fileList: [...fileList] }); بالرغم من أن هذا يمكن أن يحل المشكلة التي يعرضها العميل

ولكن وفقًا للطلب ، بعد تحميل الملف ، تُرجع الخلفية معرف الملف. عند النقر فوق إرسال ، أحتاج إلى إعادة المعرف ولكن يتم تحميل الحالة دائمًا ، لذلك لا يمكنني الحصول على الاستجابة من واجهة الخلفية.
@ afc163

نفس المشكلة هنا. في المكون Upload يتم استدعاء خاصية رد الاتصال في action لكن الوسيطة UploadFile تأتي مع originFileObj ie undefined فارغة. هل لديك أي فكرة عن كيفية قراءة محتوى الملف باستخدام المكون Upload ant بدون تحميل الملف إلى الواجهة الخلفية؟

نفس المشكلة هنا. في المكون Upload يتم استدعاء خاصية رد الاتصال في action لكن الوسيطة UploadFile تأتي مع originFileObj ie undefined فارغة. هل لديك أي فكرة عن كيفية قراءة محتوى الملف باستخدام المكون Upload ant بدون تحميل الملف إلى الواجهة الخلفية؟

في الواقع ، لا تحتاج إلى originFileObj ، فقط استخدم كائن الملف. أعتقد أنهم أزالوا originFileObj

أنا هنا لأنني أردت التأكد من أنني لم أضف ملفات في قائمتي لم تنجح في التحميل. بمعنى آخر ، إذا لم أرغب في عرض هذا الملف في واجهة المستخدم إذا كان file.status === "error" بي (بالتأكيد ، لا أريد إرسال هذا الملف المعيب في الطلب). حاولت التحكم في ذلك من خلال العمل مع المكون المتحكم به والاستفادة من fileList . واجهت المشكلة المذكورة من حالة الملف لا تتغير أبدًا من "التحميل".

لذلك عدت إلى عدم استخدام مكون خاضع للرقابة بسبب هذه المشكلة. تمكنت من الحصول على الطلب المطلوب عن طريق التأكد من أن normFile يضيف فقط الملفات التي ليست "خطأ".

normFile = (e) => {
    if (Array.isArray(e)) {
      return e.filter(x => x.status !== "error");
    }
    return e && e.fileList.filter(x => x.status !== "error");
  };

const generationRequestDecorator = getFieldDecorator('generationRequest', {
      rules: [
        {
          required: true,
          message: 'Please upload your config'
        }
      ],
      valuePropName: 'fileList',
      getValueFromEvent: this.normFile,
    });

const props = {
      name: 'file',
      action: '/api/to/upload',
      multiple: true,
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };

const generationRequestArea = generationRequestDecorator(
      <Upload {...props}>
        <Button>
          <Icon type="upload"/> Click to Upload
        </Button>
      </Upload>
    );

مرة أخرى ، آمل بصدق أن يتمكن فريق antd من النظر في اقتراحي (كتب سابقًا هنا ):

الحفاظ على حالات تحميل الملف على مثيل Upload بدلاً من حالة المثيل. قبل الميلاد لا يتم تحديث الحالة دائمًا بشكل متزامن!

خلفي ، سيتم عرض البيانات التي يتم إرجاعها في الخلفية بشكل منفصل على الصفحة ، Upload آخر عملية تحميل دائمًا

تضمين التغريدة
`handleChange = (معلومات) => {
دع fileList = info.fileList ؛
this.setState ({fileList: fileList.slice ()}) ؛
إذا (info.file.status === 'تم') {
message.success (info.file.name + "نجاح التحميل") ؛
fileList = fileList.slice (-1) ،
fileList = fileList.map ((ملف) => {
إذا (file.response) {
file.url = file.response. # تحقق من الرد الخاص بك واختر عنوان url الخاص بك مرة أخرى من الخادم # ؛
}
ملف العودة
}) ؛

  fileList = fileList.filter((file) => {
    if (file.response) {
      return file.response.#check your respone and choose your own respone status code back from server# === 200;
    }
    return false;
  });

  this.setState({ fileList });
} else if (info.file.status === 'error') {
  message.error(info.file.name + " upload failed");
}

} `

جرب هذا.

لقد واجهت هذه المشكلة أيضًا. بعد موجة من الاختبارات ، شعرت أنه تم العثور على المشكلة. اشرح:

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

يتضمن موقف الاختبار: إذا قمت بإجراء this.setState({fileList}) في handleChange ، فسيتم تنفيذه بشكل طبيعي.

كتابتي السابقة مشابهة لهذا ، بعد التصفية ، تؤدي إلى التنفيذ الأول ، تصفية قائمة الملفات إلى مصفوفة فارغة. لذلك ، هناك دائمًا حالة واحدة فقط للتحميل.
أعتقد أن المشكلة تكمن في أنه بعد الرفع ، إذا قمت بتعيين قائمة الملفات يدويًا على مصفوفة فارغة ، فسيؤثر ذلك على التنفيذ المستمر لحدث onChange. بعد إجراء تعديل طفيف على شروط المرشح ، تم حل المشكلة التي واجهتها بالفعل.

هل هناك علاقة ملزمة بين هذين العقارين تحت الصيانة الرسمية؟

بالإضافة إلى ذلك ، في الحالة الرسمية ، هناك مثل هذه الحالة مع التصفية (قائمة تحميل التحكم الكامل) ، ولا أعرف ما إذا كانت هناك مشكلة في شبكتي ، فهذه الحالة بها هذا الموقف أيضًا.

لقد واجهت هذه المشكلة أيضًا. بعد موجة من الاختبارات ، شعرت أنه تم العثور على المشكلة. اشرح:

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

يتضمن موقف الاختبار: إذا قمت بإجراء this.setState({fileList}) في handleChange ، فسيتم تنفيذه بشكل طبيعي.

كتابتي السابقة مشابهة لهذا ، بعد التصفية ، تؤدي إلى التنفيذ الأول ، تصفية قائمة الملفات إلى مصفوفة فارغة. لذلك ، هناك دائمًا حالة واحدة فقط للتحميل.
أعتقد أن المشكلة تكمن في أنه بعد الرفع ، إذا قمت بتعيين قائمة الملفات يدويًا على مصفوفة فارغة ، فسيؤثر ذلك على التنفيذ المستمر لحدث onChange. بعد إجراء تعديل طفيف على شروط المرشح ، تم حل المشكلة التي واجهتها بالفعل.

هل هناك علاقة ملزمة بين هذين العقارين تحت الصيانة الرسمية؟imxiongying

بالإضافة إلى ذلك ، في الحالة الرسمية ، هناك مثل هذه الحالة مع التصفية (قائمة تحميل التحكم الكامل) ، ولا أعرف ما إذا كانت هناك مشكلة في شبكتي ، فهذه الحالة بها هذا الموقف أيضًا.

في حالة خاضعة للرقابة ، قم بتعيين قائمة الملفات على إفراغ في رد الاتصال onChange ، وسيتم تحديث قائمة الملفات الموجودة داخل مكون التحميل إلى مصفوفة فارغة. في منطقتها الداخلية onSuccess و onProgress والمنطق الآخر ، سيتم العثور على الملف الذي أطلق الحدث من قائمة الملفات. تشغيل عند تغيير رد الاتصال

luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh ، إنه مثل هذا

yidianier handleProgress أين تسمى هذه الوظيفة؟

yidianier handleProgress أين تسمى هذه الوظيفة؟

onProgress = {this.handleProgress}

يتم استخدام المكونات التي يتم التحكم فيها والمكونات التابعة الخارجية البحتة في السيناريوهات الخاصة بكل منها. يتم التحكم بشكل منطقي في المكونات الخاضعة للرقابة في نملة ، مثل النقر فوق الفراغ لإلغاء المربع المنسدل ، وما إلى ذلك. إذا تم التحكم في كل هذه العناصر خارجيًا ، فسوف تشعر بأنك مميز مشكلة ، لذا فإن المكون الخاضع للرقابة يحمل جزءًا من المنطق الأساسي ، وليس مشكلة في تصميم المكون ، لذلك لا تشكو. . .

@الكل

@ afc163

yidianier handleProgress أين تسمى هذه الوظيفة؟

onProgress = {this.handleProgress}

شكر

ستحدث هذه المشكلة أيضًا في 3.13.1 @ afc163

@ xiaolong1024 https://github.com/ant-design/ant-design/pull/14780

@ xiaolong1024 # 14780

لا تزال هذه المشكلة تحدث. هل تتعلق بصيغة RC؟

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // 相关文件对象数据格式化处理
      return item;
    });
  }
   // 避免原来的文件丢失，这样子写就可以了
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// 上传进度可以通过onProgress中的percent来控制样式，而不是file.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

هذه الإجابة حلت مشكلتي！

في الإصدار 3.13.0 ، سيؤدي تشغيل this.setState ({fileList}) في onChange بعد الحزم إلى إلغاء طلب التحميل ، وهذا أمر طبيعي في بيئة التطوير ، ولا يمكن تحديد السبب.

tsuijie 3.13.5 تم إصلاحه.

أود أن أسأل المؤلف ، بعد التحميل ، لا يمكنني الحصول على الرد ضمن fileOBJ ومعرّف الملف الذي تم إرجاعه بواسطة الخلفية. لدي نفس الموقف ، الحالة === التحميل

`استيراد React ، {مكون} من 'رد فعل' ؛
استيراد {تحميل ، أيقونة} من 'antd' ؛
استيراد {urlMapToFileList، fileListTourlMap} من "@ / utils / utils" ؛
استيراد {upLoadFile} من "@ / services / api" ؛

توسع فئة UploadForm المكون {
ثابت الافتراضي بروتوكولات = {
hideCheckAll: false ،
} ؛

مُنشئ (دعائم) {
سوبر (الدعائم) ؛
console.log (urlMapToFileList (props.value)) ،
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [] ،
// القيمة: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [] ،
} ؛
}

onChange = القيمة => {
const {onChange} = this.props ؛
إذا (عند التغيير) {
const selfValue = fileListTourlMap (قيمة) ،
onChange (selfValue.length؟ selfValue: null) ؛
}
} ؛
handleChange = (البيانات) => {
const {file} = البيانات ؛
const {fileList} = البيانات ؛
console.log ('handleChange'، file.status) ؛
إذا (file.status === 'تم') {
المصحح
const {response} = ملف ؛
إذا (response && response.success) {
file.url = response.result.url؛
fileList.pop () ،
fileList.push (ملف) ؛
}
}
إذا (file.status === 'خطأ') {
fileList.pop () ،
}

if(!file.status) {
  fileList = fileList.filter(ele => ele.url)
}
this.setState({filesList: fileList});
this.onChange(fileList);

}

يجعل() {
const {filesList} = this.state ؛
إرجاع (

قبول = "صورة / *"
headers = {{'x-Access-Token': localStorage.getItem ('token')}}
الإجراء = "/ api / admin / file / upload"
listType = "بطاقة الصورة"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1؟ لا شيء:

تصدير UploadForm الافتراضي ؛
"
这种 控制 上传 数量 ， 但 上传 状态 一直 为 تحميل 是 啥 原因？
@ afc163

على الرغم من أنها مشكلة قديمة منذ بضع سنوات ، لكنني اليوم أيضًا صعدت إلى الحفر وتحدثت عن الحفر التي واجهتها. إذا كنت تستخدم React.PureComponent لإنشاء مكونات ، يرجى ملاحظة أنها ستجتاز دورة حياة shouldComponentUpdate افتراضيًا. لإجراء مقارنة ضحلة ، لم يتغير عنوان مرجع الولاية لقائمة الملفات ، وبالتالي لن يتغير مكون التحميل.

دع fileList = info.fileList ؛
/ * هنا تحتاج إلى تغيير مرجع قائمة الملفات * /
fileList = JSON.parse (JSON.stringify (fileList)) ،
this.setState ({fileList: fileList}) ،

3.16.1 لا يزال التحميل يواجه مشاكل ، ويتم التغيير مرة واحدة فقط ، ويوصى بالتحديث

تحتاج this.setState ({fileList: fileList.slice ()}) بهذه الطريقة

3.16.2 عند استخدام React Hook ، يجب نسخ قائمة الملفات بشكل عميق عند تغيير التحميل ، يمكنك استخدام Lodash _.cloneDeep (fileList)

ادمج mobx ، واستخدم عنصرين للتحميل في Modal ، وحدد قائمتين للملفات في المتجر المقابل. يمر أحد أحداث onChange الخاصة بالتحميل بعملية التحميل العادية (يتم استلام كل من حالات التحميل والقيام) ، لكن الآخر كان مخيبا للآمال. كان هناك تحميل فقط طوال الوقت ، ولا يمكن حله إلا بهذه الطريقة
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
وإذا جاء this.fileList من فئة موروثة ، فلن تعمل الطريقة المعدلة

if (status === 'error') {
    message.success(`${file.name} upload failed.`);
    const fileList = this.state.fileList.filter(file => !file.error);
    this.setState({
        fileList
    }, () => {
        console.log(this.state.fileList)
    })
}

أريد إزالة عنصر العرض الفاشل عندما يفشل. لماذا لا تتغير الحالة بهذه الطريقة؟

console.log صحيحة ، والحالة فارغة ، لكن أدوات المطور لا تزال متاحة ، كما يتم عرض صور التحميل الفاشلة

https://github.com/ant-design/ant-design/issues/2423#issuecomment -491143417

this.setState({
    fileList:[...fileList]
}

كيفية إضافة حقول الهوية والرموز المميزة لعناوين URL المقيدة ، وكيفية استخدام الإجراءات لنقلها؟ العمل يعطي العنوان فقط ، لا يمكن إضافة البيانات؟

يمكن وضعها في الرأس

يتم حل مشكلتي مع هذه الحيلة

كان لدي نظام إنشاء إدخال ديناميكي ، لذا باستخدام الدعائم الديناميكية الجديدة ، يمكنك إخبار antd عن الدعائم المتواجدة

تم إصلاحه بالنسبة لي عندما بدأت في استخدام React.Component بدلاً من React.PureComponent .

عندما أستخدم modal.info والتحكم في قائمة الملفات ، يتم استدعاء onChange مرة واحدة فقط. ولكن عندما أقوم بإزالة Modal ، فإنه يعمل

يستطيع

1: استخدم React
2: انتبه للتحقق مما إذا تم تعيين fileList في getDerivedStateFromProps وما إذا تم تعيينها بشكل صحيح.
3: قائمة الملفات: this.state.fileList
4: onChange: ({file، fileList}) => {
this.setState ({fileList}) ،
}

3.19.7 لا يزال لديه هذه المشكلة

أنا أنشر حالة ناجحة للرجوع اليها. لقد واجهت هذه المشكلة من قبل. احسب هنا أيضًا دون ملاحظة ، من أجل تسهيل البحث المريح في وقت لاحق

env:

• antd: 4.0.0-rc.1
• الموالية للتخطيط: 5.0.0
• رد فعل: 16.9.17

import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='上传归档文件'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

يا لها من حفرة ، يجب ضبط حالة التحميل على fileList ، وإلا فلن يتم تنفيذها إلا مرة واحدة ، وبعد فترة طويلة من الإلقاء ، ستكون عاجزة عن الكلام.

أنا أنشر حالة ناجحة للرجوع اليها. لقد واجهت هذه المشكلة من قبل. احسب هنا أيضًا دون ملاحظة ، من أجل تسهيل البحث المريح في وقت لاحق

env:

• antd: 4.0.0-rc.1
• الموالية للتخطيط: 5.0.0
• رد فعل: 16.9.17

import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='上传归档文件'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

لدي نفس المشكلة باستخدام مكون Func. يحتوي Info.status دائمًا على حالة تحميل ويتم تشغيل المكالمات مرة واحدة فقط

tsuijie 3.13.5 تم إصلاحه.

3.13.5 لدي نفس المشكلة أيضًا. سيؤدي تشغيل this.setState ({fileList}) في onChange إلى إلغاء طلب التحميل

إذا كنت لا تستخدم واجهة الإجراء الخاصة به ، بعد التحميل ، ستكون هناك حالة تحميل ، تحتاج إلى تعيين حالة كل ملف يدويًا ليتم تنفيذه

إذا كنت لا تستخدم واجهة الإجراء الخاصة به ، بعد التحميل ، ستكون هناك حالة تحميل ، تحتاج إلى تعيين حالة كل ملف يدويًا ليتم تنفيذه

يرجى التحقق مما إذا كان الكائن الجديد مستخدمًا عندما تعيد قائمة الملفات كتابة الحالة ، [... fileList]

حسنا شكرا لك

---أصلي---
من: "Amumu" < [email protected]>
التاريخ: الأحد 26 يوليو 2020 ، 17:59 مساءً
إلى: "ant-design / ant-design" < [email protected]>؛
نسخة إلى: "تعليق" < [email protected]> ؛ "SCLGIS" < [email protected]> ؛
الموضوع: Re: [ant-design / ant-design] تحميل file.status قيد التحميل دائمًا (# 2423)

إذا كنت لا تستخدم واجهة الإجراء الخاصة به ، بعد التحميل ، ستكون هناك حالة تحميل ، تحتاج إلى تعيين حالة كل ملف يدويًا ليتم تنفيذه

يرجى التحقق مما إذا كان الكائن الجديد مستخدمًا عندما تعيد قائمة الملفات كتابة الحالة ، [... fileList]

-
أنت تتلقى هذا لأنك علقت.
قم بالرد على هذه الرسالة الإلكترونية مباشرةً ، أو اعرضها على GitHub ، أو قم بإلغاء الاشتراك.

لا يعمل إذا كنت أستخدم الخطافات مع تمكين خيارات "المضاعفات".
إذا قمت بتحديد 3 ملفات ، سأحصل على 2 في القائمة. إذا قمت بتحديد 5 ملفات ، فسأحصل على 3 ملفات ، وأحيانًا 4. إذا قمت بإزالة الخاصية "fileList" ، فإنها تعمل بشكل جيد ، ويمكنني رؤية جميع الملفات في القائمة ، لكن لا يمكنني التحكم فيها - أحتاج إلى خاصية "fileList".
لدي سلوك مختلف إذا استخدمت مكون فئة بدلاً من الخطاف useState.

لقد واجهت هذه المشكلة أيضًا في 4.5.1 ، وقد تم تحميلها دائمًا.لقد جربت الطرق التي ذكرها كبار الشخصيات من قبل ، لكنها كانت غير مجدية. أخيرًا ، نظرت إلى شفرة المصدر ووجدت أن السبب في ذلك هو أن القيمة الرئيسية لمكون التحميل كانت مختلفة في كل مرة عندما كنت أقوم بالتصيير ، مما أدى إلى إعادة العرض. ألغى الكود المصدر طلب التحميل السابق بشكل افتراضي ، مما أدى إلى استمرار إنها حالة رفع القيمة ، يتم إصلاح قيمة المفتاح ومن ثم يمكن تحميلها بنجاح.

tsuijie 3.13.5 تم إصلاحه.

3.13.5 لدي نفس المشكلة أيضًا. سيؤدي تشغيل this.setState ({fileList}) في onChange إلى إلغاء طلب التحميل