上传处置类型修改

luobisheng

2022-11-29 4641a877cd6a94e4d35dca7f7f14bc1443e2d2ad

 src/components/myUpload/index.vue

@@ -1,144 +1,177 @@
<template>
    <div class="my-upload">
        <el-upload 
        :file-list="fileList" 
        class="upload-demo" 
        action="/sccg/file/medias" 
        :multiple="multiple"
        :show-file-list="flag" 
        :before-upload="beforeUpload" 
        :limit="limit" 
        :on-success="handleSuccess"
        :on-error="handleError" 
        :list-type="listType" 
        :on-remove="handleRemove"
        :headers="getToken()">
            <div class="upload-btn" :style="{'height':btnHeight,'width':btnWidth}">
                <i class="el-icon-plus"></i>
                <span>上传图片</span>
            </div>
        </el-upload>
  <div class="my-upload">
    <div v-if="pictureList.length > 0" class="image-box">
      <div v-for="image in pictureList" class="image-box-item">
        <i
          v-if="isShowUpload"
          @click="handleDeletePicture(image)"
          class="el-icon-delete image-delete-icon"
        ></i>
        <el-image :key="image" class="image-content" :src="image"></el-image>
      </div>
    </div>
    <el-upload
      v-if="isShowUpload"
      :file-list="fileList"
      action="/sccg/file/medias"
      :multiple="multiple"
      :show-file-list="flag"
      :before-upload="beforeUpload"
      :limit="limit"
      :on-success="handleSuccess"
      :on-error="handleError"
      :list-type="listType"
      :headers="getToken()"
    >
      <div class="upload-btn">
        <i class="el-icon-plus"></i>
        <span>上传图片</span>
      </div>
    </el-upload>
  </div>
</template>
<script>
export default {
    data() {
        return {
            // 文件列表
            fileList: [],
            // 是否显示文件列表
            flag: true,
            // 多选
            multiple: false,
            // 限制
            limit: 4,
            // 按钮高度
            btnHeight: '100px',
            // 按钮宽度
            btnWidth: '100px',
            // 文件列表类型
            listType: 'picture-card'
        };
  data() {
    return {
      // 文件列表
      fileList: [],
      // 是否显示文件列表
      flag: false,
      // 多选
      multiple: false,
      // 限制
      limit: 4,
      // 文件列表类型
      listType: "picture-card",
    };
  },
  methods: {
    // 上传之前回调
    beforeUpload(rawFile) {
      if (
        rawFile.type !== "image/png" &&
        rawFile.type !== "image/svg+xml" &&
        rawFile.type !== "image/jpg" &&
        rawFile.type !== "image/jpeg"
      ) {
        this.$message.error("图片必须是 jpg/svg/jpeg/png 格式!");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 5) {
        this.$message.error("上传图片不能超过 5MB!");
        return false;
      }
      return true;
    },
    methods: {
        // 上传之前回调
        beforeUpload(rawFile) {
            if (rawFile.type !== 'image/png' && rawFile.type !== 'image/svg+xml' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/jpeg') {
                this.$message.error('图片必须是 jpg/svg/jpeg/png 格式!')
                return false
            } else if (rawFile.size / 1024 / 1024 > 5) {
                this.$message.error('上传图片不能超过 5MB!')
                return false
            }
            return true
        },
        // 上传成功回调
        handleSuccess(res, file, filelist) {
            if(res.data.url1){
                this.$emit('setPictureUrl',{url:res.data.url1});
            }
            else if(res.data.url2){
                this.$emit('setPictureUrl',{url:res.data.url2});
            }
            else if(res.data.url3){
                this.$emit('setPictureUrl',{url:res.data.url3});
            }
            else{
                this.$emit('setPictureUrl',{url:res.data.url4});
            }
        },
        // 上传失败回调
        handleError(err, file, fileList) {
            console.log(err);
            this.$message({
                type:'error',
                message:err
            })
        },
        // 获取token
        getToken() {
            const token = sessionStorage.getItem('token');
            const tokenHead = sessionStorage.getItem('tokenHead');
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }
        },
        // 预览
        handlePreview(file){
            console.log(file)
        },
        // 移除文件
        handleRemove(file, fileList){
            this.$emit('delPictureUrl',{url:file.response.data.url1});
        }
    // 上传成功回调
    handleSuccess(res, file, filelist) {
      if (res.data.url1) {
        this.$emit("setPictureUrl", { url: res.data.url1 });
      } else if (res.data.url2) {
        this.$emit("setPictureUrl", { url: res.data.url2 });
      } else if (res.data.url3) {
        this.$emit("setPictureUrl", { url: res.data.url3 });
      } else {
        this.$emit("setPictureUrl", { url: res.data.url4 });
      }
    },
    props: {
        // 返回上传成功图片地址
        setPictureUrl:{
            type:Function,
            default:()=>{}
        },
        delPictureUrl:{
            type:Function,
            default:()=>{}
        }
    }
}
    // 上传失败回调
    handleError(err, file, fileList) {
      this.$message({
        type: "error",
        message: err,
      });
    },
    // 获取token
    getToken() {
      const token = sessionStorage.getItem("token");
      const tokenHead = sessionStorage.getItem("tokenHead");
      if (token && tokenHead) {
        return { Authorization: tokenHead + token };
      }
    },

    handleDeletePicture(imageUrl) {
      this.$emit("delPictureUrl", { url: imageUrl });
    },
  },
  props: {
    pictureList: {
      type: Array,
      default: () => [],
    },
    isShowUpload: {
      type: Boolean,
      default: () => true,
    },
  },
};
</script>
<style lang="scss" scoped>
.my-upload {
    .upload-demo {
        display: flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-right: 5px;

  .upload-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    width: 100px;
    height: 100px;

    &:hover i {
      color: #409eff;
    }

    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
    i {
      font-size: 30px;
      font-weight: 650;
    }
    :deep(.el-upload-list__item){
        width: 100px;
        height: 100px;

    span {
      line-height: 22px;
    }
    .upload-btn {
        // background-color: rgba(249, 249, 249, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
  }
  .image-box {
    display: flex;
    flex-wrap: wrap;
    height: 100px;
    margin: 0 10px;

        &:hover i{
            color: #409eff;
        }

        i {
            font-size: 30px;
            font-weight: 650;
        }

        span {
            line-height: 22px;
        }
    .image-content {
      width: 100px;
      height: 100px;
    }
    .image-delete-icon {
      position: relative;
      bottom: calc(100% - 50px);
      left: calc(100% - 50px);
      opacity: 0;
    }
    .image-box-item {
      padding: 0px 10px;
    }
    .image-box-item:hover {
      color: #ffffff;
      opacity: 0.5;
      .image-delete-icon {
        z-index: 2;
        opacity: 1;
      }
    }
  }

  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
  }
  :deep(.el-upload-list__item) {
    width: 100px;
    height: 100px;
  }
}
</style>