上传单图组件 和 上传多图组件 添加可拖拽上传

long

2021-09-09 30a1729ee64a237a547566f655fee1ce93827768

上传单图组件 和 上传多图组件 添加可拖拽上传

 src/components_simple/UploadMultipleImg.vue

@@ -2,6 +2,7 @@
  <div>
    <!-- 上传图片组件(多图) -->
    <el-upload
      id="UploadMultipleImg"
      ref="refUploadImg"
      :accept="accept"
      :auto-upload="false"
@@ -9,6 +10,7 @@
      :class="{disabled:uploadDisabled}"
      action="#"
      :limit="limit"
      drag
      :file-list="uploadImgs"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
@@ -153,4 +155,8 @@
.el-upload-list--picture-card .el-upload-list__item{
  margin-bottom: 0
}
#UploadMultipleImg .el-upload-dragger{
  width: auto;
  height: auto;
}
</style>

 src/components_simple/UploadSingleImg.vue

@@ -2,6 +2,7 @@
  <div>
    <!-- 上传图片组件(单图) -->
    <el-upload
      id="UploadSingleImg"
      ref="refUploadImg"
      :accept="accept"
      :auto-upload="false"
@@ -9,6 +10,7 @@
      :class="{disabled:uploadDisabled}"
      action="#"
      :limit="1"
      drag
      :file-list="uploadImgs"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
@@ -141,4 +143,8 @@
.el-upload-list--picture-card .el-upload-list__item{
  margin-bottom: 0
}
#UploadSingleImg .el-upload-dragger{
  width: auto;
  height: auto;
}
</style>

 src/pages/system/banner.vue

@@ -138,6 +138,19 @@
      pageSize: 20,
      // 分页 ↑↑↑↑↑↑↑↑↑↑

      jumpTypeOpt: [
        { label: '不跳转', value: 0 },
        { label: '小程序页面', value: 1 },
        { label: 'H5页面', value: 2 },
        { label: '其它小程序', value: 3 }
      ],

      envVersionOpt: [
        { label: '开发版', value: 'develop' },
        { label: '体验版', value: 'trial' },
        { label: '正式版', value: 'release' }
      ],

      // 显示弹窗
      isShowDialog: false,

@@ -171,12 +184,6 @@
        uploadImgs: []
      }

    }
  },
  computed: {
    // 上传禁用
    uploadDisabled() {
      return this.dialogData.uploadImgs.length > 0
    }
  },
  mounted() {