el-upload 控制上传文件类型

el-upload 组件可以通过设置 accept 属性来控制上传文件类型，例如：

<el-upload
  action="/upload"
  accept=".jpg,.jpeg,.png"
  :on-success="handleSuccess"
>
  <el-button slot="trigger">上传文件</el-button>
</el-upload>

上面的代码中，accept 属性设置为 ".jpg,.jpeg,.png"，表示只允许上传这三种类型的文件。如果上传其他类型的文件，会提示用户选择正确的文件类型。

相关问题

el-upload控制上传的文件类型

可以通过设置 el-upload 控件的 accept 属性来限制上传的文件类型。例如，如果只允许上传图片文件，可以设置 accept 属性为 "image/*"，如下所示：

<el-upload
  class="upload-demo"
  action="/upload"
  :accept="'image/*'"
  :on-success="handleSuccess"
  :on-error="handleError"
  :before-upload="beforeUpload">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，accept 属性的值为 MIME 类型或文件扩展名，可以使用通配符表示多种类型。在上面的例子中，"image/*" 表示所有图片类型，包括 jpg、png 等。如果需要限制多个类型，可以使用逗号分隔，如 "image/jpeg,image/png"。如果不希望限制文件类型，可以将 accept 属性设置为空字符串。

el-upload 限制上传文件类型 图片

对于el-upload组件，你可以使用before-upload钩子函数来限制上传文件的类型。在这个钩子函数中，你可以获取到上传的文件对象，并通过文件名后缀来判断文件类型。如果文件类型不符合要求，你可以给出相应的提示信息并阻止文件上传。

在给出的代码示例中，beforeUpload函数中的判断条件有一个错误。应该使用逻辑或运算符（||）而不是逻辑与运算符（&&）。因为一个文件的后缀名不可能同时是'.jpg'和'.txt'。所以正确的判断条件应该是：

if (fileExtName !== '.jpg' && fileExtName !== '.txt') {
  // 提醒只能上传的文件类型
  warn('只能上传.jpg、.txt类型的文件！');
  return;
}

这样，当上传的文件类型不是'.jpg'或'.txt'时，会给出相应的提示并阻止文件上传。

希望这个解答对你有帮助！
#### 引用[.reference_title]
- *1* *2* [el-upload 限制上传数量、文件类型](https://blog.csdn.net/Daydreame_r/article/details/127320550)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v4^insert_chatgpt"}} ] [.reference_item]
- *3* [el-upload限制文件大小(图片尺寸)](https://blog.csdn.net/ljw124213/article/details/124404779)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v4^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]