vue中element-ui中upload中绑定的数组一直是空的什么情况

在Vue中使用Element UI的Upload组件时，如果绑定的数组始终显示为空，可能有以下几个原因：

1. 数据绑定问题：确认`<el-upload>`元素的`list`属性是否正确绑定了数据源，并确保该数组是在父组件的数据驱动下变化的。例如：

<template>
  <el-upload
    :action="uploadUrl"
    list="fileList"
    ...其他props...
  ></el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    handleSuccess(response, file) {
      // 文件上传成功后的处理，将响应数据添加到fileList
      this.fileList.push(file);
    },
    ...其他方法...
  }
};
</script>

2. 初始化问题：如果你在`data`阶段没有初始化`fileList`，记得在实例创建时给它一个初始值。

3. 数据流问题：检查上传文件的操作是否已经触发了数组的更新。`handleSuccess`等事件处理器里应该能正确地把新上传的文件添加到数组中。

4. 渲染时机：确保你在适当的时候将文件列表渲染出来，比如在`mounted`生命周期钩子或某个异步操作完成后。

相关问题

element-ui(vue)upload组件提交后清空文件列表

在 element-ui 的 Upload 组件中，可以通过监听 `success` 事件来清空文件列表。具体操作如下：

1. 给 `el-upload` 组件添加 `ref` 属性，如 `ref="upload"`。

2. 在 `el-upload` 组件上绑定 `success` 事件和对应的处理函数，如下所示：

   <el-upload ref="upload" :on-success="handleSuccess"></el-upload>

3. 在 `handleSuccess` 函数中，调用 `clearFiles` 方法来清空文件列表，如下所示：

   methods: {
     handleSuccess(response, file, fileList) {
       // 处理上传成功的逻辑
       this.$refs.upload.clearFiles(); // 清空文件列表
     }
   }

通过以上操作，当上传成功后，文件列表将被清空。

vue使用element-ui制作上传文件的效果

在使用vue和element-ui制作上传文件的效果时，可以按照以下步骤进行：

1. 安装element-ui：在终端中使用npm或yarn进行安装，例如：npm install element-ui --save。

2. 在vue组件中引入element-ui的上传组件：在需要使用上传功能的组件中，使用import引入element-ui的上传组件，例如：

<template>
  <div>
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :file-list="fileList"
      multiple
      list-type="picture"
      :auto-upload="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
import { Upload, Button } from 'element-ui';

export default {
  components: {
    'el-upload': Upload,
    'el-button': Button
  },
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handlePreview(file) {
      console.log('preview', file);
    },
    handleRemove(file) {
      console.log('remove', file);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500k = file.size / 1024 < 500;
      if (!isJPG) {
        this.$message.error('只能上传jpg/png文件');
      }
      if (!isLt500k) {
        this.$message.error('文件大小不能超过500kb');
      }
      return isJPG && isLt500k;
    },
    handleUploadSuccess(response, file, fileList) {
      console.log('success', response, file, fileList);
    },
    handleUploadError(error, file, fileList) {
      console.log('error', error, file, fileList);
    }
  }
};
</script>

3. 配置上传组件的属性和方法：在引入上传组件后，需要根据实际需求进行配置，例如：设置上传的地址、文件大小限制、文件类型限制、上传前的校验、上传成功和失败的回调函数等。

4. 在模板中使用上传组件：在组件的模板中使用上传组件，并将需要上传的文件绑定到fileList属性上，例如：`:file-list="fileList"`。

5. 样式美化：根据实际需求对上传组件的样式进行美化，例如：设置上传按钮的颜色、设置文件列表的样式等。

通过以上步骤，就可以在vue项目中使用element-ui制作上传文件的效果了。