el-upload编辑时回显图片
在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面<el-form-item label="项目LOGO"><el-uploadref="upload":class="{hide:hideUpload}"dragaction="#"
·
在使用el-upload上传时,传给后端得是一个file文件流,而编辑回显的时候后端返回的是一个图片地址,这个时候就需要将url赋值到fileList里面
<el-form-item label="项目LOGO">
<el-upload
ref="upload"
:class="{hide:hideUpload}"
drag
action="#"
:multiple="false"
list-type="picture-card"
accept=".jpg, .png"
:show-file-list="true"
:auto-upload="false"
:limit="1"
:file-list="fileList"
:on-remove="removeFile"
:on-change="handleChange"
>
<i slot="default" class="el-icon-plus" />
<div slot="file" slot-scope="{file}">
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
>
<span class="el-upload-list__item-actions">
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file, fileList)"
>
<i class="el-icon-delete" />
</span>
</span>
</div>
</el-upload>
<el-dialog :visible.sync="dialogImg">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</el-form-item>
在回显的接口中,将URL赋值给fileList
this.fileList.push({
'url': res.data[0].avatar
})
更多推荐
已为社区贡献1条内容
所有评论(0)