element-ui上传图片(多图）_element多图片上传-优快云博客

本文链接：https://blog.youkuaiyun.com/Allen_kaihui/article/details/126762791

这是一个关于前端图片上传组件的实现代码示例，使用了Element UI库，支持多图预览、删除和上传功能。组件对上传的图片格式进行了限制，只允许JPG、PNG、BMP格式，且文件大小不能超过1MB。上传成功后，会触发更新信息的保存操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<template>
  <div class="g-c-66 pro-pic inner-upload">
      <div v-for="file, index in previewFiles" :key="index" class="img-box" style="border: 1px solid #dddddd;width: 140px;float: left;">
        <el-upload
          class="avatar-uploader"
          ref="uploader"
          name="image"
          list-type="picture-list"
          :accept="accept"
          :action="uploadUrl"
          :show-file-list="false"
          :before-upload="createBeforeAvatarUploadHandler(index)"
          :on-success="createHandleAvatarSuccessHandler(index)"
          :on-error="handleAvatarFail"
          :with-credentials="true"
        >
          <div v-if="file.url">
            <img :src="file.url" class="avatar">
            <span slot="trigger" class="g-c-eff changeBtn">更换</span>
          </div>
          <i v-else class="el-icon-plus avatar-uploader-icon">
      
            <span>点击上传</span>
          </i>
        </el-upload>
        <span v-if="file.url" class="g-c-eff deleteBtn" @click.prevent="delHandler(index)">删除</span>
      </div>
  </div>
</template>

<script>
export default {
  name: "uploadImg",
  data() {
    return {
      previewFiles: [{ url:'' }, { url:'' }, { url:'' }, { url:'' }, { url:'' }, { url:'' }],
    }
  },
  computed:{
    uploadUrl() {
//process.env.BASE_API 请求地址
      return process.env.BASE_API + '/upload/img';
    },
    accept(){
      return 'jpeg,jpg,png,bmp'
    }
  },
  methods: {
    createBeforeAvatarUploadHandler(i) {
      return (file) => {
        if (!file) {
          return false;
        }
        let testmsg = file.name.substring(file.name.lastIndexOf(".") + 1).toLowerCase();
        
        let fileSize = file.size;
        let isImage = false;
        for (let mimeType of this.accept.split(',')) {
          if (mimeType === testmsg) {
            isImage = true;
            break
          }
        }
        if (!isImage) {
          this.$message.error('上传图片必须是JPG/PNG/BMP 格式!');
          return false;
        }
        if (fileSize > 1024 * 1024) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
          return false;
        }
        return true;
      };
    },
    createHandleAvatarSuccessHandler(i) {
      return (res) => {
        const code = _get(res, 'code');
        if (code !== 1) {
          this.$message.error('上传失败');
          return;
        }
        const url = _get(res, 'data');
        if (!url) {
          this.$message.error('上传异常');
          return;
        }
        this.previewFiles[i].url = url;
        this.saveInfo();
      }
    },
    handleAvatarFail(res) {
      console.log('upload fail: ' + res);
    },
    delHandler(i) {
      this.previewFiles[i].url = '';
      this.saveInfo();
    },
    async saveInfo() {
      const honorFile = this.previewFiles.map(f => f.url).join('|');
      try {
        await updateCompany({ HonorFile: honorFile });
        this.$message.success('更新成功');
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  }
}
</script>

css

<style scoped>
.inner-upload{
  margin-top: 10px;
  height: 190px;
}
.inner-upload .el-icon-plus:before {
  content: "";
}
.inner-upload .avatar-uploader-icon {
  color: #888888;
  width: 140px;
  height: 140px;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  /*overflow: hidden;*/
  font-size: 12px;
}
.inner-upload .avatar {
  /* width: 140px;
   height: 140px;*/
  display: block;
  object-fit: scale-down;
}
.inner-upload #pro-pic{
  width: 136px;
  height: 136px;
  display: block;
  object-fit: scale-down;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.img-empty{
  vertical-align: sub;
  margin-top: 10px;
  margin-bottom: 10px;
}
.deleteBtn{
  position: absolute;
  bottom: -26px;
  left: 85px;
  cursor: pointer;
}
.changeBtn{
  position: absolute;
  bottom: -24px;
  left: 25px;
} 
.pro-pic .avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  /*overflow: hidden;*/
}
.inner-upload .el-upload{
  width: 140px;
  height: 140px;
  position: relative;
}
</style>