vue3上传图片并且支持删除

先做上传组件

<template>
  <!--  -->
  <el-upload
    ref="uploadRef"
    :headers="headers"
    :action="action"
    :limit="limit"
    :list-type="listType"
    :auto-upload="autoUpload"
    :show-file-list="showFileList"
    :on-exceed="exceed"
    :on-success="success"
    :accept="accept && accept.toString()"
    :before-upload="beforeUpload"
    :before-remove="handleRemove"
    :data="uploadData"
  >
    <slot name="file" />
    <slot />
    <slot name="tip" />
  </el-upload>
</template>
<script setup>
import { ref } from 'vue'
import { getUserToken } from '@/utils/auth'
import { Message } from 'element-ui'

const uploadRef = ref(null)

const props = defineProps({
  autoUpload: {
    type: Boolean,
    default: () => true,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  listType: {
    type: String,
    default: '',
  },
  showFileList: Boolean,
  file: Array,
  handleRemove: Function,
  limit: {
    type: Number,
    default: 4,
  },
  allowSize: {
    type: Number, // 允许图片大小
    default: 1024 * 5,
  },
  accept: {
    type: Array, // 允许图片类型
    default: () => ['.png', '.jpg', '.jpeg', '.ico'],
  },
  path: {
    type: String,
    default: '/sys/file',
  },
  uploadData: {
    // 上传时额外需要的参数
    type: Object,
    default: () => {
      return {
        source: 'zybscrm',
        opType: 99,
      }
    },
  },
})
const headers = ref({
  'X-Token': getUserToken(),
})

const action = ref(process.env.VUE_APP_PAAS_BASE_API + props.path)

const emit = defineEmits(['uploadSuccess', 'exceed', 'handleRemove'])

const handleRemove = (file, fileList) => {
  const index = fileList.indexOf(file)
  console.log(file, fileList, index)
  emit('handleRemove', file, fileList, index)
}

const beforeUpload = (file, fileList) => {
  console.log(fileList, 'fileList')
  if (props.accept) {
    const index = props.accept.indexOf(file.name.substring(file.name.lastIndexOf('.')).toLowerCase())
    if (index < 0) {
      Message.warning('图片格式不正确')
      return false
    }
  }
  if (props.allowSize) {
    const kb = file.size / 1024
    const isLtSize = kb < props.allowSize
    const sizeStr =
      props.allowSize >= 1024 ? `${Math.round((props.allowSize / 1024) * 100) / 100}MB` : `${props.allowSize}KB`
    if (!isLtSize) {
      Message.error(`图片不能超过${sizeStr}哦`)
      return false
    }
  }
}

const exceed = (files) => {
  Message.warning(`当前限制上传 ${props.limit}个文件`)
  emit('exceed', files)
}

const success = (res, file) => {
  console.log(file, 'file')
  if (res.code === 511) {
    Message.warning(res.message)
    return
  }
  emit('uploadSuccess', res, file)
}
</script>
<style lang="scss" scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

根据组件来做上传功能

<el-form :model="Form" :rules="rules" ref="FormRef" class="formDiv">
      <h5>设置背景图</h5>
      <el-form-item class="fenMianImg" label="" prop="bgImageUrls">
        <div class="el-upload-list el-upload-list--picture-card" :class="'img-112'">
          <span v-for="(item, index) in Form.bgImageUrls" :key="index">
            <div class="el-upload-list__item is-ready">
              <el-image class="el-upload-list__item-thumbnail" :src="item" fit="contain"></el-image>
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-delete" @click="fileRemove(index)">
                  <i class="el-icon-delete" width="16" height="16"></i>
                </span>
              </span>
            </div>
          </span>
        </div>

        <uploader :showFileList="false" @uploadSuccess="uploadSuccessBg">
          <div class="bggoImg"><i class="el-icon-plus"></i></div>
        </uploader>
      </el-form-item>
      <div class="instructions">支持 jpg/ png/jpeg文件，文件大小不超过3M、背景图最多上传4张</div>
</el-form>

const FormRef = ref(null)
const rules = ref({
 bgImageUrls: [
    {
      required: true,
      message: '背景图不能为空',
      trigger: ['blur', 'change'],
    },
  ],
})
const Form = ref({
  id: '',
  bgImageUrls: [],
})

+ 方发
const uploadSuccessBg = (res) => {
  let { filePath } = res.data
  Form.value.bgImageUrls.push(filePath)
  FormRef.value.clearValidate('bgImageUrls')
}
const fileRemove = (index) => {
  console.log(index)
  Form.value.bgImageUrls.splice(index, 1)
}


+ 样式

 .fenMianImg{
    margin: 20px 0 0 20px;
    
      &.disabled .el-upload--picture-card,
      &.disabled .el-upload--picture-card i {
        color: #c9cdd4;
        cursor: not-allowed;
      }
    
      .img-112 {
        float: left;
        .el-upload-list__item,
        .upload-icon {
          width: 112px;
          height: 112px;
          float: left;
        }
      }
    
      .img-100 {
        .el-upload-list__item,
        .upload-icon {
          width: 100px;
          height: 100px;
          float: left;
        }
    
        .upload-icon {
          padding: 14px 0;
        }
      }
    
      .el-upload--picture-card {
        line-height: inherit;
        padding: 22px 0;
        color: #1d2129;
        background: #f2f3f5;
        border-radius: 4px;
        border: 1px dashed #e5e6eb;
    
        i {
          font-size: 16px;
          font-weight: 400;
          color: #1d2129;
          vertical-align: middle;
    
          & + p {
            line-height: 24px;
          }
        }
      }
    
      .el-upload-list--picture-card {
        display: inline-block;
      }
    
      .el-upload__tip {
        font-size: 14px;
        color: #86909c;
        margin: 0;
        line-height: 1;
      }
    
      .el-upload .el-button--medium {
        padding: 10px 12px;
    
        img {
          width: 14px;
          margin-right: 8px;
        }
      }
    
    
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126