a-upload在a-form里使用，偶现第一次不触发success方法

bojhkaka commented 1 year ago

[ ] I'm sure this does not appear in the issue list of the repository

基本信息

依赖包名及版本: @arco-design/web-vue@2.46.0
浏览器版本: chrome114.0.0.0

额外补充

同此问题：https://github.com/arco-design/arco-design-vue/issues/1191

预期结果

期望：form中图片上传完成后，回调success方法

复现步骤

浏览器版本Chrome 114.xxx，arco版本@arco-design/web-vue@2.46.0 使用场景也是在a-form a-form-item中有一upload组件上传图片，偶现不触发success回调方法，第一次不触发(不必现)，之后会触发，目前怀疑是form组件的v-model等属性影响；

bojhkaka commented 1 year ago

不回调success方法时：change方法的FileItem数据中，status一直为uploading状态，无法到'done'状态

yajore commented 9 months ago

不回调success方法时：change方法的FileItem数据中，status一直为uploading状态，无法到'done'状态

我也碰到了，好烦

KarynJune commented 4 months ago

我也遇到了，fileList用computed时必现这个问题：

<a-upload
    v-model:file-list="fileList"
    list-type="picture-card"
    image-preview
    action="/api/upload"
    @change="onFileChange"
    @success="onFileSuccess"
/>

const fileList = computed({
    get: () => props.modelValue,
    set: (val) => emit('update:modelValue', val);
});

const onFileChange = (fileItems, fileItem) => {
    console.log('change', fileItems, fileItem.status);  // 可以看到status一直在uploading，无法到done
};

const onFileSuccess = (fileItem) => {
    console.log("success: ", fileItem);  // 无法监听到成功
};

但用ref是正常的，因为本身用computed也是想监听传来的值，后改用watch解决了：

const fileList = ref([]);
watch(
    () => props.modelValue,
    (val) => {
        fileList.value = val;
    }
);

const onFileSuccess = (fileItem) => {
    console.log("success: ", fileItem);  // 可以监听到成功了
};

我猜是fileList上传成功赋值时会有某些处理，比如修改status，如果用computed或其他影响赋值的会导致上传状态没有正确更新，从而无法进入 success 的监听

arco-design / arco-design-vue