Ant-design: Unggah file.status selalu diunggah

Tes saya yang sebenarnya tidak ada masalah. Apakah nyaman memberikan kode lengkap masalah untuk memudahkan reproduksi?

Alamat ulang:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

Untuk mode terkontrol, Anda harus selalu menyetelState fileList dalam onChange untuk memastikan bahwa semua status disinkronkan ke Unggah. Mirip dengan kata-katanya di sini: 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} />

Direkomendasikan untuk mempelajari konsep komponen terkontrol: https://facebook.github.io/react/docs/forms.html#controlled -components

Perhatikan bahwa Anda perlu mengkloning fileList untuk memastikan bahwa Upload dapat merasakan perubahan dalam larik.

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

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

Mengapa saya menggunakan kontrol Upload untuk selalu gagal mengupload dan selalu melaporkan kesalahan: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (Not Found)

Bagaimana cara menambahkan bidang identitas dan token ke URL terbatas? Bagaimana cara menggunakan tindakan untuk mentransfernya? Tindakan hanya memberikan alamat, tidak bisakah Anda menambahkan data?

Masih ada masalah di React.PureComponent karena React.PureComponent telah membuat lapisan penilaian pengoptimalan, daftar file memiliki referensi cache, dan itu tidak akan diperbarui jika itu adalah objek yang sama, dan objek baru harus segera dibuat di React.PureComponent
handleChange = ({fileList}) => {
// memperbaiki bug
this.setState ({fileList: fileList.slice ()});
}

@fachrizal

@yongningfu Terima kasih atas tipnya, ini telah diperbarui.

Pengingat khusus: Saat menggunakan React shouldComponentUpdate untuk perbandingan dangkal, dalam mode terkontrol, bahkan jika status disinkronkan ke Upload, itu tidak akan diperbarui. Alasannya adalah referensi tersebut kongruen ===, yang mencegah render

Unggah beberapa gambar, beforeUpload menetapkan batas parameter unggah gambar, onChange mendapat daftar gambar yang telah berhasil diunggah, setelah mengunggah beberapa gambar berhasil, mengunggah gambar yang salah akan menghapus semua gambar yang berhasil diunggah sebelumnya, apakah ada solusi? ?

Saat Anda menelepon balik, Anda harus menyetel ulang status, seperti this.setState ({fileList});

handleChange = (info) => {
console.log (info);

    //把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});
}

Jadi selama onChange berubah status, Upload akan selalu dipanggil secara internal, bukan?

Masalah ini sudah lama diadu, dan ternyata adalah setState. Komponen tidak boleh dirancang seperti ini, mengapa mengandalkan status eksternal malas?

Saya hanya ingin kode base64, tanpa berinteraksi dengan latar belakang, bagaimana mengatasi masalah pengiriman permintaan secara otomatis ke latar belakang?

Apakah patung pasir untuk mempertahankan komponen ini?

Jika unggahan gagal dan saya ingin menampilkan gambar default sebelumnya, apa yang harus saya lakukan?

Unggahan gagal. Dalam fungsi pemrosesan kesalahan, panggil
this.setState ({
fileList: intial_list
})
Dapat menampilkan gambar default sebelumnya

Saya rasa mungkin ada masalah dengan waktu eksekusi callback saat pengunggahan komponen selesai. Coba pertimbangkan situasi ini:

Hubungan komponen pseudo code:

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

Komponen induk Controller diberitahukan untuk memperbarui status melalui onUpload .

Namun, karena pembaruan status React adalah asinkron, jika pengunggahan gambar cukup cepat, urutan eksekusi akan dilakukan
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
Dalam kasus upload.onSuccess eksekusi, tidak ada file yang diunggah terkait dalam status unggahan. Karena pembaruan unggahan state.fileList bergantung pada componentWillReceiveProps .

Oleh karena itu, menurut saya mode yang dikontrol saat ini dari komponen ini tidak dapat diandalkan.

Solusi yang memungkinkan:

1. Dalam mode terkontrol, logika pemrosesan aktual onSuccess dan peristiwa lain menempatkan componentDidUpdate dilakukan
2. Hindari state.fileList sepenuhnya bergantung pada props.fileList , mempertahankan fileList yang relatif independen (dan bukan status instance instance.state) pada instance komponen, kemudahan penanganan unggahan acara

biarkan {file, fileList} = info;
jika (file.size / 1024/1024> 10) {
kembali
}
console.log (file.status)
if (file.status! = "selesai") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
当 我 添加

biarkan {file, fileList} = info;
jika (file.size / 1024/1024> 10) {
kembali
}
console.log (file.status)
if (file.status! = "selesai") {
fileList = []
}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
Saat saya menambahkan
if (file.status! = "selesai") {
fileList = []
}
Pantau onchange sekali, lepaskan saja. Mengapa begitu?

Masalah ini tidak terpecahkan, benar

Memanggil setState selama siklus hidup componentWillReceiveProps untuk menampilkan gambar tidak akan berubah

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

Ketika komponen upload

@PTGuan Tentu saja, komponen ini diupload satu per satu, dan API back-end juga menerima satu file satu per satu. Anda perlu memanggil upload secara rekursif di callback setelah upload berhasil mengupload dalam batch. Harapan untuk mengakhiri pertanyaan Anda.

Masalah ini tidak terpecahkan +1

antd 3.8+ masih hanya berstatus = 'loading', dan belum ada status done, bagaimana cara mengatasinya?

Apakah ada solusi resmi untuk mengupload setiap saat, tetapi onSuccess dapat menunggu tanggapan http200 yang benar

Masalah telah diselesaikan, this.setState ({fileList: [... fileList]}); Kalimat ini sangat penting, harap fokus pada ini jika Anda memiliki masalah

@EnixCoda , sepertinya saya mengalami masalah yang Anda jelaskan, dan terkadang saat saya mengupload, selalu muncul "Mengupload".

@withzhaoyu Sebenarnya, kebanyakan orang di sini mengalami masalah ini. Komponen ini tidak dapat diandalkan untuk menyimpan kemajuan unggahan melalui status React.

Bagaimana mengatasinya! ! ! ! ! ! ! ! ! ! Telah mengunggah

Pertemuan +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});
};

Apa yang harus dilakukan selama Anda membaca base64 file tanpa berinteraksi dengan latar belakang

@ pingping92

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 , Anda dapat merangkum komponen lain berdasarkan komponen ini sendiri, apa lagi yang tidak dapat dipenuhi dalam hal fungsi

Pertanyaan yang lemah di sini, apakah ini desain yang disengaja bahwa file yang baru diunggah tidak menyediakan url secara default?

Kocak. Sekarang status di filelist masih upload, kalaupun sudah terkontrol, saya tetap setel status upload.Masalahnya tidak terpecahkan sama sekali

Bolehkah saya bertanya apakah bendera kegagalan pengunggahan file dikembalikan dari backend -> file.response.status, komponen tidak dicegat saat ini, dan ketika saya selesai, daftar file telah ditampilkan. Saya ingin menghapus daftar file melalui bendera yang dikembalikan oleh backend Bagaimana cara melakukannya?

// Saya menginjak lubang dan melihat kode sumber dan menemukan bahwa masalah yang saya gunakan adalah sebagai berikut
// 1. penamaan variabel negara
// buruk

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

// barang

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

// 2. Parameter onFileChange adalah obj (termasuk dua atribut file dan fileList) dan this.setState ({fileList: [... fileList]}); harus dipanggil dalam fungsi onFileChange

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

Ada bahasa Inggris secara kebetulan? Saya memiliki masalah ini.

@developdeez apa masalah Anda? Versi Ant Design mana yang Anda gunakan?
Saya menggunakan AntD 3.0 sebelumnya dan mengerjakan komponen Unggah ini selama beberapa bulan. Semuanya berjalan dengan baik untukku. Saya tidak memiliki masalah apa pun. Saya memang memiliki beberapa masalah pada awalnya tetapi akhirnya saya memperbaiki semuanya. Jadi saya cukup percaya diri untuk menyelesaikan semua masalah umum.

@swordguard , Ant 3.9.3

Masalah pada dasarnya tidak dapat mengontrol daftar file UI. Saya mengunggah dan gambar dan telah mencoba untuk menghapusnya menggunakan tombol dan tidak berhasil.

Saya membuat tiket di sini juga dengan beberapa kode contoh: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

Apakah Anda mampu melakukan ini?

Dalam kasus pit +1, saya mencoba this.setState({ fileList: [...fileList] }) tidak berhasil, PureComponent berubah menjadi Komponen, dan status hanya berhenti saat mengunggah kecuali jika fileList tidak dimasukkan ke dalam props.

Dalam kasus pit +1, saya mencoba this.setState({ fileList: [...fileList] }) tidak berhasil, PureComponent berubah menjadi Komponen, dan status hanya berhenti saat mengunggah kecuali jika fileList tidak dimasukkan ke dalam props.

Anda dapat mencoba, mendefinisikan fileList sebagai string ~~ == ~~
// selalu setState
this.setState ({fileList: JSON.stringify ([info.file])});

@ pingping92

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}
/>

Masalah ini belum diselesaikan. Tidak ada atribut originFileObj dalam objek file. Apakah atribut ini hanya muncul setelah diunggah? Tapi sekarang tidak ada rencana untuk mengunggah ke latar belakang dan langsung mendapatkan konten base64.

this.setState({ fileList: [...fileList] }); Meskipun ini dapat menyelesaikan masalah yang ditampilkan oleh klien

Namun menurut permintaan, setelah file diunggah, latar belakang mengembalikan id file. Saat saya klik kirim, saya harus meneruskan id kembali tetapi statusnya selalu mengunggah, jadi saya tidak bisa mendapatkan respons dari antarmuka latar belakang.
@fachrizal

Masalah yang sama di sini. Dalam komponen Upload callback dalam properti action dipanggil tetapi argumen UploadFile muncul dengan kosong originFileObj yaitu undefined . Adakah petunjuk bagaimana membaca konten file menggunakan komponen Upload ant tanpa mengupload file ke backend?

Masalah yang sama di sini. Dalam komponen Upload callback dalam properti action dipanggil tetapi argumen UploadFile muncul dengan kosong originFileObj yaitu undefined . Adakah petunjuk bagaimana membaca konten file menggunakan komponen Upload ant tanpa mengupload file ke backend?

Sebenarnya, Anda tidak memerlukan originFileObj, cukup gunakan objek file. Saya pikir mereka telah menghapus originFileObj

Saya di sini karena saya ingin memastikan bahwa saya tidak menambahkan file dalam daftar saya yang tidak berhasil diunggah. Dengan kata lain, jika file.status === "error" saya tidak ingin menampilkan file itu di UI (tentu saja, saya tidak ingin mengirimkan file yang salah itu ke dalam permintaan). Saya mencoba mengontrolnya dengan bekerja dengan komponen yang saya kendalikan sendiri dan memanfaatkan fileList . Saya mengalami masalah status file yang tidak pernah berubah dari "mengunggah".

Jadi saya kembali ke tidak menggunakan komponen yang dikontrol karena masalah ini. Saya bisa mendapatkan permintaan yang diinginkan dengan memastikan normFile hanya menambahkan file yang tidak "error".

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>
    );

Sekali lagi, saya sangat berharap tim antd dapat mempertimbangkan saran saya (sebelumnya tulis di sini ):

pertahankan status unggahan file pada Upload daripada status instance. bc negara tidak selalu diperbarui secara serempak!

Di belakangku, data yang dikembalikan di latar belakang akan ditampilkan secara terpisah di halaman, Upload akan selalu menyimpan unggahan terbaru

@yoonaiyan
`handleChange = (info) => {
biarkan fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
if (info.file.status === 'done') {
message.success (info.file.name + "upload berhasil");
fileList = fileList.slice (-1);
fileList = fileList.map ((file) => {
if (file.response) {
file.url = file.response. # periksa tanggapan Anda dan pilih kembali url Anda dari server #;
}
file kembali;
});

  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");
}

} `

coba ini.

Saya juga mengalami masalah ini. Setelah gelombang pengujian, saya merasa masalah tersebut ditemukan. Jelaskan:

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

Situasi pengujian meliputi: Jika Anda secara langsung menjalankan this.setState({fileList}) di handleChange, ini akan dijalankan secara normal.

Tulisan saya sebelumnya mirip dengan ini.Setelah memfilter, ini mengarah ke eksekusi pertama, menyaring fileList ke dalam array kosong. Oleh karena itu, hanya ada satu status pengunggahan.
Saya pikir masalahnya adalah bahwa setelah mengunggah, jika Anda secara manual mengatur fileList ke array kosong, itu akan mempengaruhi kelanjutan pelaksanaan acara onChange.Setelah sedikit memodifikasi kondisi filter, masalah yang dihadapi memang terpecahkan.

Apakah ada hubungan yang mengikat antara kedua properti ini dalam pemeliharaan resmi? @Imxiongying

Selain itu, dalam kasus resmi, ada kasus seperti filtering (daftar unggahan kontrol penuh), saya ingin tahu apakah ada masalah dengan jaringan saya, kasus ini juga memiliki situasi ini.

Saya juga mengalami masalah ini. Setelah gelombang pengujian, saya merasa masalah tersebut ditemukan. Jelaskan:

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

Situasi pengujian meliputi: Jika Anda secara langsung menjalankan this.setState({fileList}) di handleChange, ini akan dijalankan secara normal.

Tulisan saya sebelumnya mirip dengan ini.Setelah memfilter, ini mengarah ke eksekusi pertama, menyaring fileList ke dalam array kosong. Oleh karena itu, hanya ada satu status pengunggahan.
Saya pikir masalahnya adalah bahwa setelah mengunggah, jika Anda secara manual mengatur fileList ke array kosong, itu akan mempengaruhi kelanjutan pelaksanaan acara onChange.Setelah sedikit memodifikasi kondisi filter, masalah yang dihadapi memang terpecahkan.

Apakah ada hubungan yang mengikat antara kedua properti ini dalam pemeliharaan resmi? @Imxiongying

Selain itu, dalam kasus resmi, ada kasus seperti filtering (daftar unggahan kontrol penuh), saya ingin tahu apakah ada masalah dengan jaringan saya, kasus ini juga memiliki situasi ini.

Dalam situasi terkontrol, setel fileList ke kosong di callback onChange, dan fileList di dalam komponen Upload akan diperbarui ke array kosong. Dalam onSuccess internal, onProgress, dan logika lainnya, file yang memicu peristiwa tersebut akan ditemukan dari fileList. Callback onChange dipicu

@luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh, itu adalah seperti ini

@yidianier handleProgress Di manakah fungsi ini dipanggil?

@yidianier handleProgress Di manakah fungsi ini dipanggil?

onProgress = {this.handleProgress}

Komponen yang dikontrol dan komponen yang sepenuhnya bergantung pada eksternal digunakan dalam skenario masing-masing. Komponen yang dikontrol dikontrol secara logis di semut, seperti mengklik kosong untuk membatalkan kotak drop-down, dll. Jika semuanya dikontrol secara eksternal, Anda akan merasa istimewa Masalah, jadi komponen yang dikontrol menanggung bagian dari logika dasar, bukan masalah dengan desain komponen, jadi jangan mengeluh. . .

@semua

@fachrizal

@yidianier handleProgress Di manakah fungsi ini dipanggil?

onProgress = {this.handleProgress}

Terima kasih

Masalah ini juga akan terjadi di 3.13.1 @ afc163

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

@ xiaolong24 # 14780

Masalah ini masih terjadi, apakah terkait dengan rc-form?

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});
};

Jawaban ini menyelesaikan masalah saya！

Dalam versi 3.13.0, mengoperasikan this.setState ({fileList}) di onChange setelah pengemasan akan menyebabkan permintaan unggahan dibatalkan, yang merupakan hal normal dalam lingkungan pengembangan, dan alasannya tidak dapat ditentukan.

@tsuijie 3.13.5 telah diperbaiki.

Saya ingin bertanya kepada penulis, saya tidak bisa mendapatkan tanggapan di bawah fileOBJ dan fileid dikembalikan oleh backend setelah saya mengunggahnya. Saya memiliki situasi yang sama, status === mengupload

`import React, {Component} dari 'react';
impor {Unggah, Ikon} dari 'antd';
impor {urlMapToFileList, fileListTourlMap} dari '@ / utils / utils';
impor {upLoadFile} dari '@ / services / api';

class UploadForm extends Component {
static defaultProps = {
hideCheckAll: false,
};

konstruktor (alat peraga) {
super (alat peraga);
console.log (urlMapToFileList (props.value));
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
// nilai: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
};
}

onChange = value => {
const {onChange} = this.props;
if (onChange) {
const selfValue = fileListTourlMap (nilai);
onChange (selfValue.length? selfValue: null);
}
};
handleChange = (data) => {
const {file} = data;
const {fileList} = data;
console.log ('handleChange', file.status);
if (file.status === 'selesai') {
debugger
const {response} = file;
if (response && response.success) {
file.url = response.result.url;
fileList.pop ();
fileList.push (file);
}
}
if (file.status === 'error') {
fileList.pop ();
}

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

}

render () {
const {filesList} = this.state;
kembali (

terima = "gambar / *"
headers = {{'x-Access-Token': localStorage.getItem ('token')}}
tindakan = "/ api / admin / file / upload"
listType = "kartu-gambar"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? batal:

ekspor UploadForm default;
`
这种 控制 上传 数量 ， 但 上传 状态 一直 为 mengunggah 是 啥 原因？
@fachrizal

Meskipun ini adalah masalah lama beberapa tahun yang lalu, tetapi hari ini saya juga menginjak pit dan berbicara tentang pit yang saya temui. Jika Anda menggunakan React.PureComponent untuk membuat komponen, harap diperhatikan bahwa ini akan melewati siklus hidup shouldComponentUpdate secara default. Buat perbandingan yang dangkal, dan alamat referensi negara bagian dari daftar file Anda tidak berubah, sehingga komponen unggahan tidak akan berubah.

biarkan fileList = info.fileList;
/ * Di sini Anda perlu mengubah referensi fileList * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 Unggahan masih bermasalah, perubahan hanya dilakukan sekali, disarankan untuk memperbarui

Butuh this.setState ({fileList: fileList.slice ()}) dengan cara ini

3.16.2 Saat menggunakan React Hook, fileList perlu disalin secara mendalam di onChange of Upload, Anda dapat menggunakan lodash _.cloneDeep (fileList)

Integrasikan mobx, gunakan dua komponen Unggah dalam Modal, dan tentukan dua daftar file di penyimpanan yang sesuai. Salah satu peristiwa onChange dari Unggahan melewati proses unggahan normal (status unggah dan selesai diterima), Tapi yang satu lagi mengecewakan. Hanya ada unggahan sepanjang waktu. Pada akhirnya, itu hanya bisa diselesaikan dengan cara ini.
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
Dan, jika this.fileList berasal dari kelas yang diwariskan, cara yang dimodifikasi tidak akan berfungsi

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)
    })
}

Saya ingin menghapus item tampilan yang gagal jika gagal. Mengapa status tidak berubah seperti ini?

Console.log benar, status kosong, tetapi alat pengembang masih tersedia, dan gambar unggahan yang gagal juga ditampilkan

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

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

Bagaimana cara menambahkan bidang identitas dan token ke URL terbatas? Bagaimana cara menggunakan tindakan untuk mentransfernya? Tindakan hanya memberikan alamat, tidak bisakah Anda menambahkan data?

Bisa ditempatkan di header

memecahkan masalah saya dengan trik ini

Saya memiliki sistem pembuatan input dinamis, jadi dengan alat peraga dinamis baru Anda dapat memberitahu antd tentang alat peraga incomming

Ini diperbaiki ketika saya mulai menggunakan React.Component alih-alih React.PureComponent .

Ketika saya menggunakan modal.info dan control filelist, onChange hanya dipanggil sekali. Tetapi ketika saya menghapus Modal, itu berfungsi

bisa

1: Gunakan React.Component
2: Perhatikan untuk memeriksa apakah fileList disetel di getDerivedStateFromProps dan apakah sudah disetel dengan benar.
3: fileList: this.state.fileList
4: onChange: ({file, fileList}) => {
this.setState ({fileList});
}

3.19.7 masih mengalami masalah ini

Saya memposting kasus yang sukses untuk referensi Anda. Saya pernah mengalami masalah ini sebelumnya. Juga menghitung di sini buat catatan, untuk memudahkan diri sendiri lupa pencarian nyaman nanti

env:

• antd: 4.0.0-rc.1
• tata letak pro: 5.0.0
• bereaksi: 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;

Sungguh sial, status pengunggahan harus disetel ke fileList jika tidak, itu hanya akan dijalankan sekali, dan setelah lama melempar, itu akan menjadi tidak bisa berkata-kata.

Saya memposting kasus yang sukses untuk referensi Anda. Saya pernah mengalami masalah ini sebelumnya. Juga menghitung di sini buat catatan, untuk memudahkan diri sendiri lupa pencarian nyaman nanti

env:

• antd: 4.0.0-rc.1
• tata letak pro: 5.0.0
• bereaksi: 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;

Saya memiliki masalah yang sama menggunakan komponen Func. Info.status selalu memiliki status mengunggah dan panggilan onChange hanya sekali

@tsuijie 3.13.5 telah diperbaiki.

3.13.5 Saya memiliki masalah yang sama. Operasi this.setState ({fileList}) di onChange akan menyebabkan permintaan unggah dibatalkan

Jika Anda tidak menggunakan antarmuka aksinya, setelah mengunggah, akan ada status selalu mengunggah, Anda perlu mengatur status setiap file secara manual menjadi selesai

Jika Anda tidak menggunakan antarmuka aksinya, setelah mengunggah, akan ada status selalu mengunggah, Anda perlu mengatur status setiap file secara manual menjadi selesai

Silakan periksa apakah objek baru digunakan ketika fileList menulis kembali status, [... fileList]

Oke terima kasih

---Asli---
Dari: "Amumu" < [email protected]>
Tanggal: Minggu, 26 Juli 2020 17:59 malam
Kepada: "ant-design / ant-design" < [email protected]>;
Cc: "Komentar" < [email protected]>; "SCLGIS" < [email protected]>;
Subjek: Re: [ant-design / ant-design] Unggah file.status selalu diunggah (# 2423)

Jika Anda tidak menggunakan antarmuka aksinya, setelah mengunggah, akan ada status selalu mengunggah, Anda perlu mengatur status setiap file secara manual menjadi selesai

Silakan periksa apakah objek baru digunakan ketika fileList menulis kembali status, [... fileList]

-
Anda menerima ini karena Anda berkomentar.
Balas email ini secara langsung, lihat di GitHub, atau berhenti berlangganan.

Ini tidak bekerja jika saya menggunakan kait dengan opsi "kelipatan" diaktifkan.
Jika saya memilih 3 file, saya mendapatkan 2 di daftar. Jika saya memilih 5 file, saya hanya mendapatkan 3, terkadang 4. Jika saya menghapus prop "fileList", ini berfungsi dengan baik, dan saya dapat melihat semua file di daftar, tetapi saya tidak dapat mengontrolnya - saya perlu menggunakan prop "fileList".
Saya memiliki perilaku yang berbeda jika saya menggunakan komponen kelas sebagai ganti useState hook.

Saya juga mengalami masalah ini di 4.5.1, dan masalah ini selalu diupload.Saya mencoba metode yang disebutkan oleh orang-orang besar sebelumnya, tetapi tidak berhasil. Akhirnya saya melihat kode sumber dan menemukan bahwa itu karena nilai kunci dari komponen upload berbeda setiap kali saya melakukan rendering, yang menyebabkan rendering ulang. Ini adalah status uploding, nilai kunci ditetapkan dan kemudian dapat diunggah dengan sukses.

@tsuijie 3.13.5 telah diperbaiki.

3.13.5 Saya memiliki masalah yang sama. Operasi this.setState ({fileList}) di onChange akan menyebabkan permintaan unggah dibatalkan