基于vue+nodejs封装上传图片功能并实现回显功能

使用

<el-form-item label="图片" prop="imagePath">
  <ImageUpload v-model="Form.imagePath" />
</el-form-item>

ImageUpload 组件

<template>
  <div class="component-image-input">
    <div
      class="img-item"
      v-for="item in imageList"
      :key="item"
      :style="{height: `${size}px`,width:`${size}px`}"
    >
      <el-image
        :fit="fit"
        style="width:100%;height:100%;"
        :src="fullImgUrl(item)"
        :preview-src-list="preview ? imageList.map(item => fullImgUrl(item)) : []"
      >
      </el-image>
      <div
        class="mask"
        :style="{height: `${size}px`,width:`${size}px`}"
      >
        <span
          class="deleteIcon"
          v-if="!disabled"
        >
          <i
            class="el-icon-delete"
            @click.prevent="onRemove(item)"
          ></i>
        </span>
      </div>
    </div>
    <div
      class="img-item img-input"
      :style="{height: `${size}px`,width:`${size}px`}"
      v-if="!disabled && max>imageList.length "
    >
      <i class="el-icon-plus"></i>
      <input
        type="file"
        title=""
        @change="onFileChange"
        :multiple="multiple?'multiple':''"
      />
    </div>
  </div>
</template>