上传处置结果处理

luobisheng

2022-11-22 35c30ecf074b292e955d96df7a713a2166daff0e

 src/components/myUpload/index.vue

@@ -1,9 +1,8 @@
<template>
    <div class="my-upload">
        <el-upload 
        <el-upload
        :file-list="fileList" 
        class="upload-demo" 
        action="/sccg/file/medias" 
        action="/sccg/file/medias"
        :multiple="multiple"
        :show-file-list="flag" 
        :before-upload="beforeUpload" 
@@ -13,9 +12,9 @@
        :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 class="upload-btn">
              <i class="el-icon-plus"></i>
              <span>上传图片</span>
            </div>
        </el-upload>
    </div>
@@ -32,10 +31,6 @@
            multiple: false,
            // 限制
            limit: 4,
            // 按钮高度
            btnHeight: '100px',
            // 按钮宽度
            btnWidth: '100px',
            // 文件列表类型
            listType: 'picture-card'
        };
@@ -69,7 +64,6 @@
        },
        // 上传失败回调
        handleError(err, file, fileList) {
            console.log(err);
            this.$message({
                type:'error',
                message:err
@@ -82,10 +76,6 @@
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }
        },
        // 预览
        handlePreview(file){
            console.log(file)
        },
        // 移除文件
        handleRemove(file, fileList){
@@ -101,15 +91,16 @@
        delPictureUrl:{
            type:Function,
            default:()=>{}
        }
    }
        },
      pictureList: {
        type: Array,
        default: () => []
      }
    },
}
</script>
<style lang="scss" scoped>
.my-upload {
    .upload-demo {
        display: flex;
    }

    :deep(.el-upload--picture-card) {
        width: 100px;
@@ -119,13 +110,18 @@
        width: 100px;
        height: 100px;
    }
  //.file-list {
  //  display: flex;
  //  flex-wrap: nowrap;
  //}
    .upload-btn {
        // background-color: rgba(249, 249, 249, 1);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        width: 100px;
        height: 100px;

        &:hover i{
            color: #409eff;
@@ -140,5 +136,10 @@
            line-height: 22px;
        }
    }
    .uploaded-image {
      width: 0;
      height: 100px;
      display: flex;
    }
}
</style>