vue el-upload实现图片和文字上传

一、需求：

在表单中使用图片上传，每一张上传的图片都可以加上文字说明通过表单一起传到后台，最后再其他需要的地方展示出来。

 二、实现：

1. 后端表单提交时，图片需要的格式是：imageList[ { fileUrl:' ', imageExplain:' ' } ]
2. 界面代码

• v-model="form.imageUrl"

• :action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径

• :on-success="handleSuccess"  成功时回调方法

• :before-upload="beforeAvatarUpload" 上传时的校验回调

• :before-remove="() => false"  防止按下删除键图片和文字被删除

• :file-list="imageList"  图片都存到的自定义 imageList 数组

• slot="file" slot-scope="{ file }" 自定义插槽，可以在里面实现输入框

<el-form-item
        label="界面："
        class="uploader-item"
      >
        <el-upload
          v-model="form.imageUrl"
          :action="fileUrl"
          accept="image/jpg,image/jpeg,image/png"
          list-type="picture-card"
          :limit="9"
          :on-success="handleSuccess"
          :before-upload="beforeAvatarUpload"
          :before-remove="() => false"
          :file-list="imageList"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.fileUrl"
              alt=""
            />
            <el-input
              v-model="file.imageExplain"
              placeholder="图片说明"
              clearable
            >
            </el-input>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file, imageList)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        //预览的图片弹框
        <el-dialog
          class="review-dialog"
          append-to-body
          :visible.sync="imgDialogVisible"
        >
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

 3. 参数定义

 data() {
    return {
      form: {
        imageList: []
      },
      fileUrl: open_upload_path, //图片文件上传地址
      imageList: [], //上传的文件列表,
      dialogImageUrl: '', //图片预览路径
      imgDialogVisible: false, //预览是否可见
    }
  },

4.方法实现

//（文件上传成功时的钩子）
    handleSuccess(res, file, fileList) {
      if (res.code == 200 && res.result.url) {
        this.imageList.push({
          fileUrl: file.url,   //图片渲染路径
          imageUrl: res.result.url,  //要上传的路径
          imageExplain: ''  //要上传的图片说明
        })
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = ['image/jpg', 'image/jpeg', 'image/png'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt5M
    },
    //删除
    handleRemove(file, fileList) {
      this.imageList = fileList.filter((item) => {
        return item.uid !== file.uid
      })
    },
    //预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.fileUrl
      this.imgDialogVisible = true
    }

5. 样式设置

.uploader-item {
  margin: 60px 0 60px;
  :deep(.el-upload-list) {
    .is-success {
      overflow: hidden;
      height: auto;
      width: 192px;
      border: 0;
      border-radius: 0;
      margin-right: 10px;

      img,
      .el-upload-list__item-actions {
        height: 108px;
      }
      .el-input {
        .el-input__inner {
          height: 32px;
        }
      }
    }
    .is-ready,.is-uploading {
      display: none;
    }
  }
  :deep(.el-upload) {
    width: 192px;
    height: 108px;
    line-height: 108px;
    background: transparent;
    border: 1px solid #dcdfe6;
    border-radius: 0;
    margin-bottom: 20px;
    .el-icon-plus {
      color: #dcdfe6;
      font-size: 24px;
    }
  }
}