vue 上传图片之 el-upload 二次封装

最新推荐文章于 2025-05-24 18:12:11 发布

XianXiaoM

最新推荐文章于 2025-05-24 18:12:11 发布

阅读量965

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_46258341/article/details/131663597

本文介绍了如何在Vue.js项目中安装和使用Element-UI框架，特别是关于el-upload组件的配置，包括限制上传数量、文件类型检查、上传成功回调等。此外，还展示了如何自定义上传按钮和处理图片回显的问题。

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

1、安装框架 element-ui

npm i element-ui -S

2、使用框架

import Vue from 'vue';
// 引入 element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 注册
Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

3、上传图片，封装 el-upload

<template>
  <div>
    <el-upload
      action="上传地址"
      ref="upload"
      :limit="limit"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :on-remove="onRemove"
      :file-list="files"
      :on-exceed="onExceed"
      :list-type="list_type"
      :auto-upload="true"
      :data="img_type === 'face/' ? imgDataPrivacy : imgData"
    >
      <el-button size="small" type="primary" v-if="list_type == 'text'">上传图片</el-button>
      <i slot="default" class="el-icon-plus" v-if="list_type == 'picture-card'"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: this.files_data,
      imgDataPrivacy: {
        path: this.img_type,
      },
      imgData: {
        path: this.img_type,
        acl: 'public-read'
      }
    }
  },
  props: {
    limit: Number, // 最大允许上传图片
    list_type: String, // 设置文件列表的样式
    files_data: Array, // 上传的文件列表
    img_type: {
        type: String,
        default: 'images/'
    }, // 额外参数
  },

  watch: {
    files_data(val) {
      this.files = val
    },
  },

  methods: {
    /**
     * 上传成功的钩子
     * @response {Object} 上传成功后服务返回的数据
     * @file {File} 上传的文件信息 Object
     * @fileList {Array} 上传后的文件列表 Array
     **/
    onSuccess(res, file, fileList) {
      let self = this
      self.files = fileList
      self.$emit('onSuccess', {
        ...
      }) // 传给父组件的数据
    },

    // 文件上传之前调用做一些拦截限制
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },

    // 图片上传超过数量限制
    onExceed(files, fileList) {
      let self = this
      self.$message.error(`上传图片不能超过${this.limit}张!`)
    },

    /**
     * 删除文件的钩子
     * @file {File} 删除的文件信息
     * @fileList {Array} 删除后的文件列表
     **/
    onRemove(file, fileList) {
      //移除图片
      var self = this
      self.files = fileList
      self.$emit('onRemove', {
        ...
      }) // 传给父组件的数据
    },

    handleChange(file, fileList) {
      var self = this
      self.files = fileList
    },

    submit() {
      this.$refs.upload.submit()
    },

    clearFiles() {
      this.$refs.upload.clearFiles()
    },
  },
}
</script>

<style lang="scss" scoped>
</style>

4、使用组件

<template>
    <upload-img :list_type="'picture-card'" @onSuccess="onSuccess" @onRemove="onRemove" :limit="1" :files_data="files_data" ref="upload"></upload-img>
</template>

<script>
    import UploadImg from '@/components/common/upload-img.vue'

    export default {
        components: {
            UploadImg
        },

        data() {
            return {
                files_data: [],
            };
        },

        methods: {
            // 上传图片
            onSuccess(data) {
                let self = this;
                self.files_data = data.fileList;
            },
            // 删除图片
            onRemove(data) {
                let self = this;
                self.files_data = data.fileList;
            },

        },
    };
</script>

5、图片回显

element-ui 图片回显问题_XianXiaoM的博客-CSDN博客

6、参考文档

Element - The world's most popular Vue UI framework