使用el-upload 上传视频选中不到

`el-upload` 是 Element UI 提供的一个用于文件上传的功能组件，在使用过程中，如果遇到无法选择视频的问题，可能是以下几个原因：

1. **兼容性问题**：检查浏览器是否支持HTML5的File API以及Video类型的文件选择。有些老旧浏览器可能不支持选择特定类型的文件。

2. **组件配置**：确保 `el-upload` 的 `accept` 属性设置正确，如果是只允许上传视频，应该类似这样设置：`accept="video/*"`。

3. **权限限制**：某些情况下，用户可能由于隐私设置或其他安全策略，不允许访问他们的设备文件。

4. **组件状态**：确认 `el-upload` 的 `action` 和 `file-list` 是否已正确初始化，并且`multiple`属性（多文件上传）设置正确。

5. **回调函数**：查看 `on-success` 或 `on-error` 回调是否处理了文件上传过程中的异常，如果有错误信息可以参考进行排查。

6. **DOM结构**：确保选择视频的元素在正确的上下文中，比如表单元素或`<el-upload>`组件内。

如果你能提供具体的代码片段，我可以更准确地定位问题。

相关问题

el-upload 选中后自动上传

### 实现 `el-upload` 组件文件选中后自动上传

为了使 Element UI 的 `el-upload` 组件在选择文件之后立刻开始上传，可以设置属性 `auto-upload="true"`。此属性默认情况下即为真值，在模板内指定该选项即可满足需求[^1]。

<template>
  <div>
    <!-- 设置 auto-upload 属性 -->
    <el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :file-list="fileList"
      :auto-upload="true">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

上述代码片段展示了如何配置 `el-upload` 组件来启用自动上传特性。注意 `<el-upload>` 标签内的 `:auto-upload="true"` 参数用于开启这一行为。当用户通过界面选择文件时，所选文件将会被即时发送至设定的目标 URL 进行处理。

el-upload上传图片不走接口回显

`el-upload` 是 Element UI 提供的一个用于文件上传的组件。如果图片上传后没有显示在页面上而是直接通过接口处理，并没有实时回显到界面，这通常是因为你需要做两步操作：

1. **上传处理**：在 `onSuccess` 或 `onDrop` 回调函数中，除了发送 API 请求，还需要将选中的图片信息保存起来，例如将其URL存储在一个变量或状态里。

<template>
  <el-upload
    :action="uploadUrl"
    :on-success="handleSuccess"
    :auto-upload="false" <!-- 阻止默认的上传 -->
  >
    <img v-if="previewFile" :src="previewFile.url" alt="图片预览"/>
    <i v-else class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      previewFile: {},
      uploadedImages: [] // 存储已上传图片的数组
    };
  },
  methods: {
    handleSuccess(response, file) {
      this.uploadedImages.push({ url: file.response.url, name: file.name });
      this.previewFile = file; // 更新预览图
      // 发送 API 请求
      this.uploadAPI(file);
    },
    uploadAPI(file) {
      axios.post('your-api-url', { image: file.url }).then(...);
    }
  }
};
</script>

2. **回显处理**：在数据更新后（比如在 `mounted` 生命周期钩子里），你可以遍历 `uploadedImages` 列表，将图片 URL 显示在需要的地方。

mounted() {
  this.imagesList.forEach(img => (this.$refs.elUpload.clearFiles()));
  this.$nextTick(() => {
    this.uploadedImages.forEach((image, index) => {
      new Image()..src = image.url;
      // 当图片加载完成后再插入DOM
      image.imgNode = document.createElement('img');
      image.imgNode.src = image.url;
      this.$refs.elUpload.appendChild(image.imgNode);
    });
  });
}