uniapp-图片，视频上传组件封装

新建 uploadImage.vue 文件

javascript 复制代码

<template>
  <uni-file-picker ref="files" v-model="fileLists" :title="title" :limit="limit" :auto-upload="false"
    @select="selectFile" @delete="deleteFile">
    <view class="add line-d-E5 radius-16 f-24 t-gray80 bg-ed flex a-center j-center">
      <image class="img" :src="baseImgUrl + '/recycle/20260514-upload-img-icon.png'" />
    </view>
  </uni-file-picker>
</template>

<script>
  import {
    upload
  } from '@/api/system/upload';
  import util, {
    getExtname
  } from '@/utils';

  export default {
    props: {
      value: [String, Array],
      limit: {
        type: [String, Number],
        default: 5,
      },
      fileSize: {
        type: Number,
        default: 1,
      },
      title: {
        type: String,
        default: '',
      },
      pathSuffix: {
        type: String,
        default: '',
      }
    },
    data() {
      return {
        fileLists: [
          // {
          // 	url: 'https://xxx.xxx.xxx.com/VKCEYUGU-dc-site/b7c7f970-517d-11eb-97b7-0dc4655d6e68.jpg',
          // 	name: 'shuijiao.png',
          // 	extname: 'png'
          // }
        ]
      }
    },
    mounted() {
      if (this.value) {
        let imgs = this.value;
        if (typeof this.value === "string") {
          imgs = this.value.split(',');
        }
        this.fileLists = imgs.map(item => {
          return {
            url: item,
            name: item,
            extname: getExtname(item)
          };
        });
      }
    },
    methods: {
      selectFile(e) {
        let index;
        for (index in e.tempFiles) {
          this.fileLists.push(e.tempFiles[index]);
          // 先不限制图片上传大小
          if (e.tempFiles[index].size / 1024 / 1024 > this.fileSize) {
            this.$nextTick(() => {
              this.fileLists.splice(this.fileLists.length - 1, 1);
            });
            util.toast(`上传头像图片大小不能超过 ${this.fileSize} MB!`)
            break;
          }

          this.uploadImg(e.tempFilePaths[index], this.fileLists.length - 1);
        }
      },
      uploadImg(path, index) {
        upload({
            filePath: path,
            name: 'file',
            custom: {
              loading: true
            },
            // #ifdef MP-ALIPAY
            fileType: 'image/video/audio',
            // #endif
          },
          this.pathSuffix
        ).then(res => {
          this.fileLists.splice(
            index,
            1, {
              url: res.data.url,
              name: res.data.fileName,
              extname: getExtname(res.data.fileName)
            }
          );
          this.setValue();
        }).catch(err => {
          this.deleteFile({
            tempFilePath: path
          })
        });
      },
      deleteFile(e) {
        this.fileLists.forEach((item, index) => {
          if (e.tempFilePath == item.url) {
            this.fileLists.splice(index, 1);
            this.setValue();
            return;
          }
        })
      },
      setValue() {
        let imgs = this.fileLists.map(item => item.url);
        if (typeof this.value === "string" || !this.value) {
          return this.$emit('input', imgs.join(','));
        }
        this.$emit('input', imgs);
      }
    }
  }
</script>

<style lang="scss">
  .add {
    width: 160rpx;
    height: 160rpx;

    .img {
      width: 64rpx;
      height: 64rpx;
    }
  }
</style>

调用

javascript 复制代码

<com-uploadImage-index limit="3" v-model="form.urls" pathSuffix="/work_order"              
    class="upload-box flex-1 m-b-25"/>



// 自定义 上传图标
.upload-box{
 ::v-deep .icon-del-box {
   width: 40rpx;
   height: 40rpx;
  }
}