elmentui -- el-image显示预览信息

实现效果
在这里插入图片描述
实现代码

                 <div
                  v-for="item in url[1]"
                  :key="item.id"
                  class="thumbnail"
                  :title=" '文件名称 : ' + item.imageUrl.slice(-10) + '\n' + '上传时间 : ' +item.createTime"
                >
                  <el-image
                    :src="item.imageUrl"
                    :preview-src-list="url[0]"
                  />
                  <p>{{ item.imageUrl.slice(-10) }}</p>
                </div>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Element UI 的 el-form 中使用 el-image,你可以使用自定义的表单项模板来实现。 首先,你需要在表单项中添加一个自定义的模板,例如: ```html <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显示图片。如果图片已经上传,我们会显示这个图片,否则我们会显示一个上传按钮。 然后,我们需要在组件中定义这个自定义模板所需要的数据和方法: ```js 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 方法来显示上传失败的错误信息。 最后,我们需要在表单中使用这个自定义模板: ```html <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 了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值