vue使用element-ui的上传，input输入框，单选多选按钮等组件

最新推荐文章于 2025-06-10 19:34:44 发布

红烧金鱼草

最新推荐文章于 2025-06-10 19:34:44 发布

阅读量8.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42269433/article/details/90177779

本文介绍了如何在Vue项目中使用Element-UI库，包括上传组件的accept和action配置，上传前的beforeUpload方法和删除图片的handleRemove方法。对于input输入框，讨论了如何取消自动填充并设置readonly属性，以及textarea的行高设置和长度限制。此外，还涉及了复选框（checkbox）的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入element-ui --- 复选框+上传+输入框

// element-ui
import {Checkbox, Input, Upload, CheckboxGroup } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.component( 'checkbox', Checkbox );
Vue.component( 'el-input', Input);
Vue.component( 'upload', Upload );
Vue.component( 'CheckboxGroup');

【上传组件】


<template>
    <div>
        <!--上传头像 type:img-->
        <template  v-if="type == 'img'">
            <el-upload
                    class="upload-demo"
                    action="111"
                    :limit="limit"
                    :file-list="fileList"
                    :show-file-list=showFileList
                    :before-upload="beforeUpload"
                    :on-remove="handleRemove"
                    accept = "image/png,image/jpg,image/jpeg,image/gif">
                <button class="dc-common-default-btn">
                    <img src="../assets/img/common/upload-icon.png" alt="">
                    <span>{
  
  {placeholder}}</span>
                </button>
                <div class="el-upload__tip" slot="tip">{
  
  {tip}}</div>
            </el-upload>
        </template>
        <!--上传文件 type:file-->
        <template  v-else-if="type == 'file'">
            <el-upload
                    class="upload-demo"
                    action="111"
                    :limit="limit"
                    :show-file-list=showFileList
                    :file-list="fileList"
                    :before-upload="beforeUpload"
                    :on-remove="handleRemove"
                    accept = "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf,application/vnd.ms-powerpoint,text/plain">
                <!--accept = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf,application/vnd.ms-powerpoint,text/plain,application/vnd.ms-works">-->
                <button class="dc-common-default-btn">
                    <img src="../assets/img/common/upload-icon.png" alt="">
                    <span>{
  
  {placeholder}}</span>
                </button>
                <div class="el-upload__tip" slot="tip">{
  
  {tip}}</div>
            </el-upload>
        </template>
    </div>
</template>

accept :限制上传的文件格式

action="111"：上传的接口地址，可以写在这里，但是因为在项目中直接写在这里会产生跨域的问题，所以我的接口是写在

【相关方法】：

1.beforeUpload 上传前的方法里的。在这里判断是否获取数据，然后接口上传，图片上传之后，显示预览图。

2.handleRemove 点击删除方法之后将选择的数据中showList中删除。

public beforeUpload(val): any {
    this.checkImg = true;
    const me = this;
    if ((this as any).type === 'file') { // 上传简历
        const isLt10M = val.size / 1024 / 1024 < 10;
        if (!isLt10M) {
            // this.$message.error('上传头像图片大小不能超过 10MB!');
        }
        const form = new FormData();
        form.append( 'file' , val);
        (this as any).$api.uploadResume(form).then( (resp) => {