bug笔记(jeecg上传图片组件)——深度监听

112 阅读1分钟

jeecg中上传图片组件中监听value的变化时,没有添加属性immediate: true, 导致无法监听对象中的值。写编辑的功能时,一直无法回显图片。 `

    监听value变化

  watch(
    () => props.value,
    (val, prevCount) => {
      if (val instanceof Array) {
        val = val.join(',');
      }
      console.log(initTag.value);
      
      if (initTag.value == true) {
        console.log(val, '11111');

        initFileList(val);
      }
    },
    {
      immediate: true,
    }
  );`
  

在watch的选项中指定immediate: true,将立即以表达式的当前值触发回调。

文件上传的回调中initTag.value = true;属性控制删除后的图片回显,如果为false则上传后,再使用上传组件时,不会再走 ** fileUrls.push(file.response.message);**这个push图片的操作

  /**
   * 文件上传结果回调
   */
  function handleChange({ file, fileList, event }) {
    console.log(file, 'filefile');

    initTag.value = false;
    uploadFileList.value = fileList;
    if (file.status === 'error') {
      createMessage.error(`${file.name} 上传失败.`);
    }
    let fileUrls = [];
    console.log(fileList, 'fileListfileList');

    //上传完成
    if (file.status != 'uploading') {
      fileList.forEach((file) => {
        if (file.status === 'done') {
          //update-begin---author:wangshuai ---date:20221121  for:[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
          initTag.value = true;
          //update-end---author:wangshuai ---date:20221121  for:[issues/248]原生表单内使用图片组件,关闭弹窗图片组件值不会被清空------------
          fileUrls.push(file.response.message);
        }
      });
      if (file.status === 'removed') {
        initTag.value = true;
        handleDelete(file);
      }
    }
    console.log(fileUrls, '----');
    // emitData.value = fileUrls.join(',');
    state.value = fileUrls.join(',');
    console.log(fileUrls.join(','), '213123123');
    emit('update:value', fileUrls.join(','));
  }