element ui accept的用法

Element UI的Accept组件用于限制可上传的文件类型。它接受一个字符串数组，表示允许上传的文件类型，例如['jpg', 'png']。

使用方法如下：

1. 在template中添加Accept组件：

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
  :headers="{'Authorization': 'Bearer ' + token}"
  :multiple="true"
  :limit="3"
  :on-exceed="handleExceed"
  :on-change="handleChange"
  :on-success="handleSuccess"
  :file-list="fileList"
  :accept="accept"
  list-type="picture-card">
  <i class="el-icon-plus"></i>
</el-upload>

2. 在data中声明accept:

data() {
  return {
    accept: ['jpg', 'png']
  }
}

这样，用户只能上传jpg和png格式的文件。

相关问题

element ui图片上传校验

Element UI提供了多种图片上传校验方式，以下是一些常用的校验方法：

1. 图片格式校验：使用accept属性限制上传的图片格式，例如只允许上传jpg、png、gif格式的图片。

<el-upload
  class="upload-demo"
  action="/upload"
  :accept="'image/jpeg,image/png,image/gif'"
>

2. 图片大小校验：使用before-upload钩子函数，判断图片的大小是否符合要求。

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
>

methods: {
  beforeUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.$message.error('上传图片大小不能超过 2MB!');
      return false;
    }
    return true;
  }
}

3. 图片数量校验：使用limit属性限制上传的图片数量。

<el-upload
  class="upload-demo"
  action="/upload"
  :limit="3"
>

4. 图片尺寸校验：使用before-upload钩子函数，判断图片的尺寸是否符合要求。

<el-upload
  class="upload-demo"
  action="/upload"
  :before-upload="beforeUpload"
>

methods: {
  beforeUpload(file) {
    const img = new Image();
    img.src = window.URL.createObjectURL(file);
    img.onload = () => {
      const width = img.width;
      const height = img.height;
      if (width !== 300 || height !== 300) {
        this.$message.error('上传图片尺寸必须是 300px * 300px!');
        return false;
      }
      return true;
    };
  }
}

element ui 上传文件回显

在element ui中，要实现文件上传后的回显，可以通过以下步骤进行操作。首先，需要在HTML代码中添加一个用于显示回显图片的`<img>`标签。然后，在上传成功的回调函数`uploadSuccess`中，将上传成功的图片地址赋值给`imgSrc`变量，以便在`<img>`标签中显示出来。最后，在`<img>`标签的`v-show`属性中添加一个条件，控制上传成功后的图片是否显示。具体实现代码如下所示：

<!-- 图片上传 -->
<el-row>
  <el-col :span="24">
    <el-form-item label="LOGO" prop="logoImg">
      <el-upload class="upload-demo" ref="upload" name="logoImg" :action="action" :on-success="uploadSuccess" multiple :accept="accept" :limit="1" :show-file-list="false" :on-exceed="handleExceed" :on-progress="uploading" :file-list="fileList" :before-upload="beforeAvatarUpload">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" style="color:#F00">注：只能上传jpg/png文件，图片尺寸必须377mm x 60mm, 且不超过500KB</div>
      </el-upload>
    </el-form-item>
    <el-form-item v-show="imgShow">
      <img :src="imgSrc" style="width: 300px">
    </el-form-item>
  </el-col>
</el-row>

在上述代码中，`uploadSuccess`函数是上传成功后的回调函数，可以在该函数中获取到上传成功的图片地址。对应的`imgSrc`变量用于存储图片地址，以便在`<img>`标签中显示出来。通过控制`v-show`属性，可以根据需求来控制上传成功后的图片是否显示。

请注意，上述代码中的`uploadSuccess`、`imgSrc`、`imgShow`等变量和方法需要根据实际情况进行定义和使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [基于spring boot+element ui文件上传的实现与回显（一）-通过I/O实现](https://blog.csdn.net/qq_26751319/article/details/109560375)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [ElementUI图片上传 回显](https://blog.csdn.net/lwx931449660/article/details/88641246)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]