el-upload上传图片和文件

注意！！！注意！！！要使用el-upload的file-list属性，那么这个地方就需要用fileList来直接赋值，不要用res的值然后去push到this.configForm.uploadArr，不然页面会跳动

详情看：http://t.zoukankan.com/intangible-p-15349244.html

<template>
  <div>
    <el-form ref="configForm"
             :model="configForm"
             :rules="rules"
             label-width="128px">
      <el-form-item label="手绘地图:">
        <el-upload ref="uploadLogo"
                   :disabled="false"
                   :action="upload.url"
                   :name="upload.name"
                   :data="upData"
                   list-type="picture-card"
                   :on-success="(res, file, fileList) => {
                     return handleSuccess(res, file, fileList)
                   }"
                   :file-list="configForm.uploadArr">
          <i slot="default"
             class="el-icon-plus"
             :disabled="false"></i>
          <!-- 如果上面的el-upload有file-list属性：下面slot-scope解构的file是上面file-list里面的item，file-list的数据就是后端返回来，经过重新拼装的数据 -->
          <!-- 如果上面的el-upload没有file-list属性：那么slot-scope解构的file是handleSuccess返回的原生数据 -->
          <div slot="file"
               slot-scope="{file}">
            <!-- 上传的图片 -->
            <el-image v-if="file.type === 'img'"
                      fit="fill"
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt="">
            </el-image>
            <!-- 上传的文档 -->
            <i v-if="file.type === 'file'"
               class="el-icon-document"
               style="font-size: 150px"></i>
            <el-tooltip class="item"
                        effect="dark"
                        :content="file.name"
                        placement="bottom">
              <span class="el-upload-list__item-actions">
                <span v-if="file.type === 'img'"
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete"
                      @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </el-tooltip>
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible"
               :close-on-click-modal="false">
      <img :src="dialogImageUrl"
           alt="默认logo">
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'GISMapConfigInfo',
  data() {
    return {
      upload: {
        url: '//file.geeker.com.cn/uploadOSS',
        key: '',
        path: 'cloud-platform',
        name: 'Filedata'
      },
      dialogVisible: false,
      dialogImageUrl: '',
      configForm: {
        uploadArr: []
      },
      upData: {
        path: '',
        key: ''
      },
      rules: {}
    };
  },
  methods: {
    // 步骤1：上传前
    beforeUpload(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt200K = file.size / 1024 <= 30720;
      if (!isJPG) {
        this.$message.error('提示', '手绘地图只能上传jpg、png格式图片');
        return false;
      }
      if (!isLt200K) {
        this.$message.error('提示', '手绘地图上传大于30M，请修改后重新上传');
        return false;
      }
      return true;
    },
    // 步骤2：onchange函数
    handleChange(file) {
      this.asyncImgChecked(file, {
        type: 'image'
      }).then((data) => {
        if (data) {
          this.$refs.uploadLogo.submit();
        }
      });
    },
    asyncImgChecked(file, params) {
      return new Promise((resolve) => {
        const reader = new FileReader();
        // 必须用file.raw，将图片转换成base64格式
        reader.readAsDataURL(file.raw);
        // 让页面中的img标签的src指向读取的路径
        reader.onload = () => {
          const img = new Image();
          img.src = reader.result;
          img.onload = () => {
            if (params.type === 'ico') {
              if (img.width !== params.width && img.height !== params.height) {
                this.$message.error('提示', '图片尺寸不合规格，请修改后重新上传！');
                // 上传完成后清除缓存
                this.$refs.uploadIcon.clearFiles();
                resolve(false);
              } else {
                resolve(true);
              }
            } else if (params.type !== 'ico') {
              resolve(true);
            }
          };
        };
      });
    },
    // 步骤3： 上传成功，这里的res就是后端返回的数据
    handleSuccess(res, file, fileList) {
      // console.log(res);
      // console.log(file);
      // console.log(fileList);
      if (fileList.length > 0) {
        fileList.forEach((i) => {
          const type = i.name.split('.')[i.name.split('.').length - 1];// 这里区分上传的文件的类型，具体情况根据后端反的数据来定
          if (['png', 'jpg', 'jpeg', 'gif'].includes(type)) {
            i.type = 'img';
          } else {
            i.type = 'file';
          }

        });
        this.configForm.uploadArr = fileList;// 注意！！！要使用el-upload的file-list属性，那么这个地方就需要用fileList来直接赋值，不要用res的值然后去push到this.configForm.uploadArr，不然页面会跳动
      } else {
        this.$message.error('提示', res.message || '上传失败');
      }
      // this.configForm = Object.assign({}, this.configForm);// 有可能直接赋值视图不更新，因此深拷贝一份
    },
    // 点击预览图片
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 点击删除上传的图片
    handleRemove(file) {
      this.configForm.uploadArr.forEach((i, index) => {
        if (file.uid === i.uid) {
          this.configForm.uploadArr.splice(index, 1);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

效果：