基于elementPlus的el-upload的二次封装组件

基于vue3,elementPlus的el-upload的二次封装组件,支持多传 数量控制

upload.vue

<template>
  <!-- 2022/8/29 Carter -->
  <el-upload
    v-model:file-list="fileLists"
    :action="actionUrl"
    :limit="limit"
    :disabled="disabled"
    list-type="picture-card"
    :auto-upload="true"
    :multiple="false"
    :accept="accept"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :http-request="httpRequest"
    :class="{ limitOpctin: limit === fileLists.length }"
  >
    <el-icon><Plus /></el-icon>
  </el-upload>

  <el-dialog v-model="dialogVisible">
    <img style="width: 90%" w-full :src="dialogImageUrl" alt="图片预览" />
  </el-dialog>
</template>

<script setup>
/**
 * @desc 封装 element UI el-upload
 * @param {fileLists} [v-model] - 双向绑定的值
 * @param {Number} [limit] [v-bind]- 上传个数限制
 * @param {String} [accept] [v-bind]- 上传后缀的限制
 * @param {disabled} [Boolean] [v-bind]- 是否禁用
 * @example <UpLoad :limit='1' v-model:fileLists='ruleForm.fileLists' accept='image/png,image/jpg'/>
 */
import { ref, onMounted } from 'vue'
import { Plus, Delete, ZoomIn } from '@element-plus/icons-vue'
import { config } from '@/assets/js/config'
const props = defineProps({
  limit: {
    type: Number,
    default: 1
  },
  accept: {
    type: String,
    default: 'image/png,image/jpeg,image/gif,image/jpg'
  },
  fileLists: {
    type: Array,
    default: [],
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const infoList = ref([])

const dialogImageUrl = ref('')
const percent = ref(0)
const actionUrl = ref('#')
const dialogVisible = ref(false)
const emit = defineEmits(['update:fileLists'])
onMounted(() => {
  infoList.value = props.fileLists || []
})

const handleRemove = uploadFile => {
  infoList.value.forEach((v, i) => {
    if (v.uid == uploadFile.uid) {
      infoList.value.splice(i, 1)
    }
  })
  emit('update:fileLists', infoList.value)
}

const handlePictureCardPreview = uploadFile => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const httpRequest = async params => {
  const file = params.file
  // 文件名(8位随机数):zokcutz4.jpg
  const fileName =
    Math.random().toString(36).substr(-8) +
    file.name.substr(file.name.lastIndexOf('.'))

  // 目录加文件名【上线前修改目录名】
  const fileSrc = `test20220824/${fileName}`
  try {
    params.onProgress({ percent: 0 })
   //上传的自定义逻辑都在这里

    infoList.value = [
      ...infoList.value,
      {
        uid: file.uid,
        name: file.name,
        url: `${config.awsUrl}${res.key}`
      }
    ]
    // console.log(`上传成功 ${res.key}`)
    emit('update:fileLists', infoList.value)
    params.onSuccess()
  } catch (err) {
    console.log(err, 'err')

    ElMessage.error('网络错误,请稍后重试')
    params.onError()
  }
}
</script>

<style lang="scss" scoped>
.limitOpctin :deep(.el-upload--picture-card) {
  display: none !important;
}
</style>

页面使用

<template>
  <!-- 2022/8/30 Carter 页面 -->
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="140px"
    class="demo-ruleForm"
    size="default"
    status-icon
  >

    <el-form-item label="上传背景图" prop="bgLists">
     <!-- 上传使用 -->
      <UpLoad
        v-model:fileLists="ruleForm.bgLists"
        accept="image/png,image/jpg,image/gif"
      />
      <div style="width: 500px">支持的图片格式为PNG,JPG,GIF</div>
    </el-form-item>
    <el-form-item label="上传图片" prop="fileLists">
      <UpLoad
        v-model:fileLists="ruleForm.fileLists"
        accept="image/png,image/jpg,image/gif"
      />
      <div style="width: 500px">支持的图片格式为PNG,JPG,GIF</div>
    </el-form-item>
  </el-form>

</template>
<script setup>
import UpLoad from '@/components/form/upload.vue'
</script>

在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于el-upload的二次封装,你可以按照以下步骤进行: 1. 创建一个新的组件,例如UploadWrapper.vue。 2. 在UploadWrapper.vue中引入el-upload组件: ```javascript <template> <el-upload></el-upload> </template> <script> import { Upload } from 'element-ui'; export default { components: { 'el-upload': Upload }, } </script> ``` 3. 在UploadWrapper.vue中,将el-upload的props和事件传递给封装组件: ```javascript <template> <el-upload :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" :before-upload="beforeUpload" :on-success="onSuccess" :on-remove="onRemove" ></el-upload> </template> <script> // ... export default { // ... props: { action: String, headers: Object, data: Object, fileList: Array, multiple: Boolean }, methods: { beforeUpload(file) { this.$emit('before-upload', file); }, onSuccess(response, file, fileList) { this.$emit('on-success', response, file, fileList); }, onRemove(file, fileList) { this.$emit('on-remove', file, fileList); } } } </script> ``` 4. 在父组件中使用封装组件UploadWrapper.vue: ```javascript <template> <upload-wrapper :action="action" :headers="headers" :data="data" :file-list="fileList" :multiple="multiple" @before-upload="beforeUpload" @on-success="onSuccess" @on-remove="onRemove" ></upload-wrapper> </template> <script> import UploadWrapper from './UploadWrapper.vue' export default { components: { 'upload-wrapper': UploadWrapper }, data() { return { action: 'your-action-url', headers: { // headers配置 }, data: { // 请求携带的额外参数 }, fileList: [], // 文件列表 multiple: true // 是否支持多选 } }, methods: { beforeUpload(file) { // 文件上传前的操作 }, onSuccess(response, file, fileList) { // 文件上传成功的操作 }, onRemove(file, fileList) { // 文件移除的操作 } } } </script> ``` 这样,你就完成了el-upload的二次封装。在父组件中,通过props传入el-upload的配置项和事件,并在UploadWrapper组件中进行处理和触发相应的事件。同时可以根据需要自定义一些额外的功能和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值