el-upload

个人学习记录

• 通过多选按钮的name，来显示对应的tab按钮，点tab按钮来显示不同的2张图片

        <div class="info-item">
          <span class="info-item-span">销售渠道:</span>
          <el-checkbox-group v-model="checkedChannels" @change="handleCheckedCitiesChange">
            <el-checkbox
              v-for="(item,index) in channelList"
              :label="item"
              :key="index"
            >{{item.name}}</el-checkbox>
          </el-checkbox-group>
        </div>
        
          <div class="specal-image-container">
          <span class="info-item-span">特定图片:</span>
          <div style="position: relative;display: flex; width: 90%;">
            <div class="specal-image-right" v-for="(item,index) in imageList" :key="index">
              <div class="tab-container">
                <div
                  @click="onClickTab(item,index)"
                  :style="index==selectIdx? selectStyle:noSelectStyle"
                >{{item.deviceType}}</div>
              </div>
              <div
                v-if="index==selectIdx"
                class="img-container"
                style="width: 75%;justify-content: space-between;position:absolute;left: 0;"
              >
                <div>
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadImageUrlNew"
                    :show-file-list="false"
                    :on-change="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="token"
                    :on-success="(res)=> handleImgSuccessMot(res,index,item)"
                  >
                    <img
                      v-if="imageList[index].motHDImage"
                      :src="imageList[index].motHDImage"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div
                    style="width: 180px"
                    slot="tip"
                    class="el-upload__tip"
                  >MOT主图：请上传372px * 235px 的jpg/png图片,且小于400kb</div>
                </div>
                <div>
                  <el-upload
                    class="avatar-uploader"
                    :action="uploadImageUrlNew"
                    :show-file-list="false"
                    :on-change="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :headers="token"
                    :on-success="(res)=> handleImgSuccessMoc(res,index,item)"
                  >
                    <img
                      v-if="imageList[index].mocHDImage"
                      :src="imageList[index].mocHDImage"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <div
                    style="width: 180px"
                    slot="tip"
                    class="el-upload__tip"
                  >MOC主图：请上传372px * 235px 的jpg/png图片,且小于400kb</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        //script
        import { getToken } from "@/util/auth";
        export default {
          data(){
          	return {
            	 channelList: [
                  {
                    name: "苹果",
                    value: "1"
                  },
                  {
                    name: "华为",
                    value: "2"
                  },
                  {
                    name: "小米",
                    value: "3"
                  },
                  {
                    name: "VIVO",
                    value: "4"
                  },
                  {
                    name: "OPPO",
                    value: "5"
                  }
              ],
              checkedChannels: [],
            }
          },
            created() {
              this.token = { "Wolf-Auth": "bearer " + getToken() };
            },
            methods: {
                handleCheckedCitiesChange(value) {
                  console.log("value::", value);
                  console.log("checkedChannels::", this.checkedChannels);
                  this.selectIdx = 0;
                  let selectArr = [];
                  for (let i = 0; i < this.checkedChannels.length; i++) {
                    selectArr.push({
                      deviceType: this.checkedChannels[i].name,
                      motHDImage: "",
                      mocHDImage: ""
                    });
                  }
                  this.imageList = selectArr;
                },
              // 上传成功的index
              handleImgSuccessMot(res, index, item) {
                console.log(item, "+++++++item");
                console.log(res, "+++++++res");
                this.imageList[index].motHDImage = res.data.phoneUrl;
                console.log(this.imageList, "this.imageList");
              },

              handleImgSuccessMoc(res, index, item) {
                this.imageList[index].mocHDImage = res.data.phoneUrl;
              },
                 uploadBefore(file, done, loading, column) {
                    console.log("file:111", file);
                    console.log("column:", column);
                    const isTypeTrue =
                      file.type === "image/png" ||
                      file.type === "image/jpg" ||
                      file.type === "image/jpeg";
                    const isLt500K = file.size / 1024 < 400;
                    // _this.saveData.imageUrl ="";
                    if (!isLt500K) {
                      console.log("isLt500K::", isLt500K);
                      this.$message.error("上传图片大小应该小于400K!");
                      loading();
                      return;
                    }
                    if (!isTypeTrue) {
                      this.$message.error("请上传png/jpg格式的图片");
                      loading();
                      return;
                    }
                    const isSize = new Promise(function(resolve, reject) {
                      let width = 0;
                      let height = 0;
                      if (column.prop == "breviaryPhotoUrl") {
                        width = 372;
                        height = 235;
                      } else if (
                        column.prop == "longPhotoUrl" ||
                        column.prop == "unLongPhotoUrl"
                      ) {
                        width = 1536;
                        height = 537;
                      } else if (
                        column.prop == "manufacturerPhotoUrl" ||
                        column.prop == "unManufacturerPhotoUrl"
                      ) {
                        width = 1248;
                        height = 780;
                      }
                      let _URL = window.URL || window.webkitURL;
                      let img = new Image();
                      img.onload = function() {
                        let valid = img.width == width && img.height == height;
                        valid ? resolve() : reject();
                      };
                      img.src = _URL.createObjectURL(file);
                    }).then(
                      () => {
                        done();
                        return file;
                      },
                      () => {
                        console.log("错误的");
                        let limitWidth = 0;
                        let limitHeight = 0;
                        if (column.prop == "breviaryPhotoUrl") {
                          limitWidth = 372;
                          limitHeight = 235;
                        } else if (
                          column.prop == "longPhotoUrl" ||
                          column.prop == "unLongPhotoUrl"
                        ) {
                          limitWidth = 1536;
                          limitHeight = 537;
                        } else if (
                          column.prop == "manufacturerPhotoUrl" ||
                          column.prop == "unManufacturerPhotoUrl"
                        ) {
                          limitWidth = 1248;
                          limitHeight = 780;
                        }
                        this.$message.error(
                          "上传的图片必须是" + limitWidth + " * " + limitHeight + "!"
                        );
                        loading();
                        // return false;
                        return Promise.reject();
                      }
                    );
                  },

            }
        }