要素の開発 - アップロード複数のコンポーネントと同じ機能に対する解決策を結合

リファレンスオンライン偉大な神は、最終的にはより少ない数の関数を書くことができます。これは、閉鎖に関連します。

HTML：

    <el-form :model="form" label-width="160px">
      <el-form-item label="商品封面" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='1' :file-list="fileList_1"
          :class="{'disabled':fileList_1.length >= 1}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,1)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,1)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,1)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品轮播" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='4' :file-list="fileList_2"
          :class="{'disabled':fileList_2.length >= 4}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,2)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,2)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,2)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="商品详情" style="height: 90px;">
        <el-upload
          :action="uploadUrl" multiple :limit='4' :file-list="fileList_3"
          :class="{'disabled':fileList_3.length >= 4}" list-type="picture-card"
          :on-success="(rep,file,fileList)=>handleSuccess(rep,file,fileList,3)"
          :on-error="(err,file,fileList)=>handleError(err,file,fileList,3)"
          :on-remove="(file,fileList)=>handleRemove(file,fileList,3)"
          :on-exceed="handleExceed"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
      
    <!-- 图片预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

データ：

    return {
	  uploadUrl: 'https://jsonplaceholder.typicode.com/posts/',
      form: {
        homeImgId: '',
        carouselImgIds: [],
        detailImgIds: [],
      },

      fileList_1: [],
      fileList_2: [],
      fileList_3: [],
      
      dialogImageUrl: '', // 预览图片路径
      dialogVisible: false, // 预览对话框是否可见
    }
    

方法：

	// 成功
    handleSuccess(rep, file, fileList, index) {
      this.$message.success('上传成功')
      this['fileList_' + index] = fileList
    },
    // 失败
    handleError(err, file, fileList, index) {
      this.$message.error('上传失败')
      this['fileList_' + index] = fileList
    },
    // 移除
    handleRemove(file, fileList, index) {
      this.$message.success('删除成功')
      this['fileList_' + index] = fileList
    },
    // 超出限制
    handleExceed(file, fileList) {
      this.$message.warning('超出图片上传数量限制！')
    },
    // 预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    

CSS：

	// 图片
	/deep/ .el-upload--picture-card, /deep/ .el-upload-list__item {width: 90px;height: 90px;position: relative;} // 盒子大小
	/deep/ .el-icon-plus {width: 28px;height: 28px; position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;} // 加号位置
	/deep/ .disabled .el-upload--picture-card {display: none} // 超出数量限制隐藏上传按钮