arco-design-vue icon indicating copy to clipboard operation
arco-design-vue copied to clipboard

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

Open bojhkaka opened this issue 2 years ago • 3 comments

基本信息

  • 依赖包名 及 版本: @arco-design/[email protected]
  • 浏览器版本: chrome114.0.0.0

额外补充

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

预期结果

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

复现步骤

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

bojhkaka avatar Jul 05 '23 08:07 bojhkaka

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

bojhkaka avatar Jul 05 '23 10:07 bojhkaka

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

我也碰到了,好烦

yajore avatar Jan 06 '24 08:01 yajore

我也遇到了,fileListcomputed时必现这个问题:

<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 的监听

KarynJune avatar Jun 13 '24 07:06 KarynJune