在在el-from中使用el-image

在 Element UI 的 el-form 中使用 el-image，你可以使用自定义的表单项模板来实现。

首先，你需要在表单项中添加一个自定义的模板，例如：

<el-form-item label="图片">
  <template slot="label">
    <span>图片</span>
    <el-tooltip class="item" effect="dark" content="这是一个图片">
      <i class="el-icon-info"></i>
    </el-tooltip>
  </template>
  <template slot-scope="{ value, error }">
    <el-image
      v-if="value"
      :src="value"
      :fit="fit"
      :lazy="lazy"
      :preview-src-list="[value]"
    />
    <el-upload
      v-else
      class="upload-demo"
      :action="uploadAction"
      :on-success="handleSuccess"
      :on-error="handleError"
      :before-upload="beforeUpload"
      :show-file-list="false"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">
        上传图片
      </el-button>
    </el-upload>
    <div v-if="error" class="el-form-item__error">{{ error[0] }}</div>
  </template>
</el-form-item>

在这个例子中，我们使用了 el-image 来显示图片。如果图片已经上传，我们会显示这个图片，否则我们会显示一个上传按钮。

然后，我们需要在组件中定义这个自定义模板所需要的数据和方法：

data() {
  return {
    fit: 'cover',
    lazy: true,
    uploadAction: 'https://jsonplaceholder.typicode.com/posts/',
    imageUrl: '',
    imageFile: null,
    rules: {
      image: [{ required: true, message: '请上传图片' }]
    }
  }
},
methods: {
  beforeUpload(file) {
    this.imageFile = file
    this.imageUrl = URL.createObjectURL(file)
    return false
  },
  handleSuccess(response, file) {
    this.$message.success(`上传成功：${file.name}`)
    this.imageUrl = URL.createObjectURL(this.imageFile)
  },
  handleError(error, file) {
    this.$message.error(`上传失败：${error.message}`)
  }
}

在这个例子中，我们定义了一个 fit 属性和一个 lazy 属性来控制 el-image 的显示方式。我们还定义了一个 uploadAction 属性来指定图片上传的地址。

我们使用 beforeUpload 方法来在上传图片之前保存图片文件，使用 handleSuccess 方法来在图片上传成功之后显示图片。如果上传失败，我们会使用 handleError 方法来显示上传失败的错误信息。

最后，我们需要在表单中使用这个自定义模板：

<el-form :model="form" :rules="rules" ref="form" label-width="100px">
  <el-form-item label="标题" prop="title">
    <el-input v-model="form.title"></el-input>
  </el-form-item>
  <el-form-item label="内容" prop="content">
    <el-input v-model="form.content"></el-input>
  </el-form-item>
  <el-form-item label="图片">
    <el-image-upload
      v-model="form.image"
      :fit="fit"
      :lazy="lazy"
      :upload-action="uploadAction"
    />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">提交</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>

在这个例子中，我们使用 el-image-upload 来作为自定义模板。我们还使用了 v-model 来将图片上传的结果绑定到表单项的值中。

这样，我们就可以在 el-form 中使用 el-image 了。