• Vue3中图片上传组件封装-element-plus的el-upload二次封装-案例

     代码封装 

    1. <div class="form-box-item">
    2.   <div class="form-box-item-label">交易盈利证明div>
    3.   <el-upload
    4.     v-if="!ImageProve"
    5.     class="upload-box"
    6.     ref="uploadRef"
    7.     drag
    8.     multiple
    9.     action=""
    10.     :limit="1"
    11.     :auto-upload="false"
    12.     :http-request="uploadBpmn"
    13.     :before-upload="(file) => beforeUpload(file)"
    14.     :on-change="handleChange"
    15.     :on-error="handError"
    16.   >
    17.     <img src="@/assets/images/futures/upload.png" alt="" />
    18.     <div class="el-upload__text">
    19.       <div class="upload-green-text">上传文件div>
    20.       <div class="upload-text">或拖拽放入div>
    21.     div>
    22.   el-upload>
    23.   <img v-else style="width: 150px" :src="ImageProve" />
    24. div>
    1. const uploadRef = ref(null);
    2.  
    3. const fileType = ref({
    4.   limitSize: 2,
    5.   type: 'png'
    6. });
    7.  
    8. const beforeUpload = (file) => {
    9.   console.log('beforeUpload', file);
    10.   // 上传文件之前钩子
    11.   const type = file.name.split('.')[file.name.split('.').length - 1];
    12.   console.log(type, '文件格式！');
    13.  
    14.   if (file && file.size / 1024 / 1024 > fileType.value.limitSize) {
    15.     ElMessage.error(`文件大小不能超过${fileType.value.limitSize}`);
    16.     return false;
    17.   }
    18.   if (file && !fileType.value.type.indexOf(file.type) == -1) {
    19.     ElMessage.error(`只能上传${fileType.value.type}类型的文件`);
    20.     return false;
    21.   }
    22. };
    23. const uploadBpmn = (param) => {
    24.   console.log('uploadBpmn', param);
    25.   // const formData = new FormData();
    26.   // formData.append('file', param.file);
    27.   // console.log(formData.get('file'), param, 888);
    28. };
    29.  
    30. const handleChange = (response, file, fileList) => {
    31.   console.log('handleChange', response, file, fileList);
    32.   // getProfileAvatarUploadParam(response);
    33.   // console.log(uploadRef.value, 99);
    34.   uploadRef.value.clearFiles(); //清除文件对象
    35.   // uploadRef.value.submit() //提交 .clearFiles()清除
    36. };
    37.  
    38. const handError = (error, file, fileList) => {
    39.   console.log('handError', error, file, fileList);
    40. };
    41.  
    42. // 获取头像上传参数
    43. const getProfileAvatarUploadParam = async (file) => {
    44.   try {
    45.     let params = {
    46.       contentType: file.raw.type || 'image/png'
    47.     };
    48.     const {
    49.       data: { data }
    50.     } = await profileAvatarUploadParam(params);
    51.     console.log('getProfileAvatarUploadParam', data);
    52.     uploadImage(data, file);
    53.   } catch (error) {
    54.     console.log('getProfileAvatarUploadParam', error);
    55.   }
    56. };
    57.  
    58. const ImageProve = ref(null);
    59.  
    60. // 上传图片
    61. const uploadImage = async (xhrData, file) => {
    62.   console.log('uploadImage', xhrData, file);
    63.   try {
    64.     const formData = new FormData();
    65.     for (const key in xhrData.param) {
    66.       const value = xhrData.param[key];
    67.       formData.append(key, value);
    68.     }
    69.     formData.append('file', file.raw);
    70.     // console.log(xhrData.param, formData.get('file'), 9898);
    71.     let config = {
    72.       method: 'post',
    73.       // maxBodyLength: Infinity,
    74.       url: xhrData.uploadUrl,
    75.       data: formData,
    76.       headers: {
    77.         'Content-Type': 'multipart/form-data'
    78.       }
    79.     };
    80.     const res = await axios.request(config);
    81.     ImageProve.value = xhrData.accessUrl;
    82.     console.log('uploadImage', res);
    83.   } catch (error) {
    84.     console.log('uploadImage', error);
    85.   }
    86. };

    在Vue3中，我们可以使用element-plus提供的el-upload组件进行图片上传。但是有时候我们需要根据具体业务需求对该组件进行二次封装，以适应项目中的具体场景。下面给出一个基于element-plus的el-upload组件的二次封装，实现图片上传和图片预览功能。

    1. 安装element-plus

    在Vue3项目中，我们可以使用npm或yarn来安装element-plus组件库。

    1. // 使用npm安装element-plus
    2. npm install element-plus --save
    3.  
    4. // 使用yarn安装element-plus
    5. yarn add element-plus

    2. 封装图片上传组件

    在封装图片上传组件时，我们可以将el-upload组件进行二次封装，以方便在项目中的使用。具体封装代码如下：

    2.  
    3. <script>
    4. export default {
    5.   name: 'AvatarUploader',
    6.   props: {
    7.     actionUrl: {
    8.       type: String,
    9.       default: ''
    10.     },
    11.     showFileList: {
    12.       type: Boolean,
    13.       default: true
    14.     },
    15.     multiple: {
    16.       type: Boolean,
    17.       default: false
    18.     },
    19.     limit: {
    20.       type: Number,
    21.       default: 1
    22.     },
    23.     tip: {
    24.       type: String,
    25.       default: '只能上传jpg/png文件，且不超过2M'
    26.     },
    27.     fileList: {
    28.       type: Array,
    29.       default() {
    30.         return [];
    31.       }
    32.     }
    33.   },
    34.   methods: {
    35.     handleExceed(files, fileList) {
    36.       this.$message.warning(`只能上传${this.limit}个文件`);
    37.     },
    38.     handleSuccess(response, file, fileList) {
    39.       console.log(response, file, fileList);
    40.       this.$emit('success', response, file, fileList);
    41.     },
    42.     beforeRemove(file, fileList) {
    43.       return this.$confirm(`确定移除 ${file.name}？`);
    44.     },
    45.     handleRemove(file, fileList) {
    46.       console.log(file, fileList);
    47.       this.$emit('remove', file, fileList);
    48.     },
    49.     handlePreview(file) {
    50.       window.open(file.url, '_blank');
    51.     }
    52.   }
    53. };
    54. script>
    55.  
    56. <style scoped>
    57. .avatar-uploader {
    58.   display: inline-block;
    59.   width: 100px;
    60.   height: 100px;
    61.   border-radius: 50%;
    62.   background-size: cover;
    63.   background-position: center center;
    64.   overflow: hidden;
    65.   position: relative;
    66. }
    67. .avatar-uploader input {
    68.   display: none;
    69. }
    70. .avatar-uploader-icon {
    71.   display: block;
    72.   width: 100%;
    73.   height: 100%;
    74.   line-height: 100px;
    75.   text-align: center;
    76.   font-size: 28px;
    77.   color: #999;
    78.   background-color: #fff;
    79.   cursor: pointer;
    80. }
    81. .el-upload__tip {
    82.   font-size: 12px;
    83.   color: #999;
    84.   margin-top: 10px;
    85.   text-align: center;
    86. }
    87. style>

    在该封装组件中，我们定义了一些props属性，包括文件上传地址(actionUrl)、是否显示文件列表(showFileList)、是否支持多选(multiple)、最大上传文件个数(limit)、上传提示内容(tip)、文件列表(fileList)等。我们还定义了一些方法，包括文件数量超限(handleExceed)、文件上传成功(handleSuccess)、文件删除前(beforeRemove)、文件删除成功(handleRemove)、文件预览(handlePreview)等。在该封装组件中，我们使用了element-plus提供的el-upload组件，并在其基础上进行了二次封装。

    3. 使用封装组件

    在项目中使用我们封装好的图片上传组件非常简单，只需要在具体页面中引入该组件并传递相应的props属性即可。具体代码如下：

    2.  
    3. <script>
    4. import AvatarUploader from '@/components/AvatarUploader.vue';
    5.  
    6. export default {
    7.   name: 'ImageUploadPage',
    8.   components: {
    9.     AvatarUploader
    10.   },
    11.   data() {
    12.     return {
    13.       uploadUrl: '',
    14.       uploadTip: '只能上传jpg/png文件，且不超过2M',
    15.       fileList: []
    16.     };
    17.   },
    18.   methods: {
    19.     handleSuccess(response, file, fileList) {
    20.       console.log(response, file, fileList);
    21.     },
    22.     handleRemove(file, fileList) {
    23.       console.log(file, fileList);
    24.     }
    25.   }
    26. };
    27. script>
    28.  
    29. <style scoped>
    30. .upload-wrapper {
    31.   width: 500px;
    32.   margin: 0 auto;
    33. }
    34. style>

    在上述代码中，我们在ImageUploadPage页面中引入了我们封装好的AvatarUploader组件，并传递了相应的props属性。在实际使用中，我们可以根据具体业务需求进行修改和调整。

    Vue3中可以通过对element-plus的el-upload进行二次封装来实现图片上传组件的封装。下面是一份简单的示例：

    1、安装element-plus：

    npm install element-plus --save

    2、创建一个Upload.vue组件，并引入element-plus和相关样式：

    1. <template>
    2.   <el-upload
    3.     class="upload-demo"
    4.     drag
    5.     :headers="headers"
    6.     :action="action"
    7.     :multiple="multiple"
    8.     :data="data"
    9.     :before-upload="beforeUpload"
    10.     :on-success="onSuccess"
    11.     :on-error="onError"
    12.     :on-exceed="handleExceed"
    13.     :limit="limit"
    14.     :show-file-list="showFileList"
    15.     :file-list="fileList">
    16.     <slot name="uploadButton">slot>
    17.     <slot name="tip">slot>
    18.   el-upload>
    19. template>
    20.  
    21. <script>
    22. import { ref } from 'vue'
    23. import 'element-plus/packages/theme-chalk/src/base.scss'
    24. import 'element-plus/packages/theme-chalk/src/upload.scss'
    25. import {
    26.   ElUpload,
    27.   ElButton,
    28.   ElPopover,
    29. } from 'element-plus'
    30. export default {
    31.   components: {
    32.     ElUpload,
    33.     ElButton,
    34.     ElPopover,
    35.   },
    36.   props: {
    37.     action: {
    38.       type: String,
    39.       required: true,
    40.     },
    41.     headers: {
    42.       type: Object,
    43.       default: () => ({}),
    44.     },
    45.     multiple: {
    46.       type: Boolean,
    47.       default: false,
    48.     },
    49.     data: {
    50.       type: Object,
    51.       default: () => ({}),
    52.     },
    53.     limit: {
    54.       type: Number,
    55.       default: 0,
    56.     },
    57.     showFileList: {
    58.       type: Boolean,
    59.       default: true,
    60.     },
    61.   },
    62.   emits: ['success', 'error'],
    63.   setup(props, { emit }) {
    64.     const fileList = ref([])
    65.     const beforeUpload = (file) => {
    66.       const isJPG = file.type === 'image/jpeg'
    67.       const isGIF = file.type === 'image/gif'
    68.       const isPNG = file.type === 'image/png'
    69.       const isLt2M = file.size / 1024 / 1024 < 2
    70.  
    71.       if (!isJPG && !isGIF && !isPNG) {
    72.         this.$message.error('上传图片只能是 JPG/GIF/PNG 格式!')
    73.         return false
    74.       }
    75.       if (!isLt2M) {
    76.         this.$message.error('上传图片大小不能超过 2MB!')
    77.         return false
    78.       }
    79.       return true
    80.     }
    81.     const handleExceed = (files, fileList) => {
    82.       this.$message.warning(`当前限制选择 ${props.limit} 张图片，本次选择了 ${files.length} 张，共选择了 ${files.length + fileList.length} 张。`)
    83.     }
    84.     const onSuccess = (response, file, fileList) => {
    85.       emit('success', response, file, fileList)
    86.     }
    87.     const onError = (err, file, fileList) => {
    88.       emit('error', err, file, fileList)
    89.     }
    90.     return {
    91.       fileList,
    92.       beforeUpload,
    93.       handleExceed,
    94.       onSuccess,
    95.       onError,
    96.     }
    97.   },
    98. }
    99. script>
    100.  
    101. <style scoped>
    102. .upload-demo {
    103.   margin-top: 10px;
    104.   display: flex;
    105.   flex-wrap: wrap;
    106.   justify-content: flex-start;
    107.   align-items: center;
    108. }
    109.  
    110. .upload-demo .el-upload {
    111.   margin-right: 15px;
    112.   margin-bottom: 15px;
    113. }
    114.  
    115. .upload-demo .el-upload__tip {
    116.   margin: 0;
    117. }
    118.  
    119. .upload-demo .el-upload-list {
    120.   margin: 0;
    121. }
    122. style>

    3、在父级组件中使用Upload.vue组件：

    1. <template>
    2.   <div class="page">
    3.     <upload
    4.       :action="uploadUrl"
    5.       :show-file-list="false"
    6.       :limit="limit"
    7.       @success="handleSuccess"
    8.       @error="handleError"
    9.     >
    10.       <el-button size="small" type="primary">上传文件el-button>
    11.       <el-popover
    12.         slot="tip"
    13.         placement="top"
    14.         :width="tipWidth"
    15.         trigger="hover"
    16.       >
    17.         <el-image
    18.           style="width: 100%;"
    19.           :src="tipImage"
    20.           @error="handleTipImageError"
    21.         />
    22.       el-popover>
    23.     upload>
    24.     <el-upload-list :list-type="listType" :items="fileList" />
    25.   div>
    26. template>
    27.  
    28. <script>
    29. import Upload from '@/components/Upload.vue'
    30. import { ref } from 'vue'
    31. import { ElUploadList, ElButton, ElImage } from 'element-plus'
    32. import 'element-plus/packages/theme-chalk/src/base.scss'
    33. import 'element-plus/packages/theme-chalk/src/upload.scss'
    34.  
    35. export default {
    36.   components: {
    37.     Upload,
    38.     ElUploadList,
    39.     ElButton,
    40.     ElImage,
    41.   },
    42.   setup() {
    43.     const fileList = ref([])
    44.     const limit = 5
    45.     const listType = 'picture-card'
    46.     const uploadUrl = 'https://jsonplaceholder.typicode.com/posts/'
    47.  
    48.     const handleSuccess = (response, file, fileList) => {
    49.       fileList.push({
    50.         name: file.name,
    51.         url: URL.createObjectURL(file.raw),
    52.       })
    53.     }
    54.     const handleError = (err, file, fileList) => {
    55.       console.error(err)
    56.     }
    57.  
    58.     return {
    59.       fileList,
    60.       limit,
    61.       listType,
    62.       uploadUrl,
    63.       handleSuccess,
    64.       handleError,
    65.     }
    66.   },
    67. }
    68. script>
    69.  
    70. <style scoped>
    71. .page {
    72.   max-width: 640px;
    73.   margin: 0 auto;
    74. }
    75. style>

    通过以上代码示例可以看出，在Upload.vue组件中，我们可以通过props来接收父组件传递的参数，比如上传地址（action）、上传时携带的参数（data）、上传的文件头信息（headers）等等。在父组件中，我们通过使用Upload.vue组件，并将需要上传的参数作为props传递给上传组件，同时也可以在Upload.vue组件中使用自定义事件来向父组件派发成功或错误的事件，比如上传成功事件（success）和上传错误事件（error）等等。在父组件中，我们可以通过设置listType属性来控制文件列表的显示方式，比如图片卡片显示方式（picture-card）或文件列表方式（text）等等。

     Vue3中图片上传组件的二次封装可以使用Element Plus中的el-upload组件。el-upload组件是一个通用的上传组件，支持多文件上传、拖拽上传、图片裁剪等功能。以下是一个基于Element Plus的el-upload组件的二次封装实例：