问题回顾:
之前使用el-upload死活显示不出来图片,或者莫名奇妙的样式问题,使用插槽又没有el-upload的样式,这次记录一下坑
解决
直接上代码
html中
<el-upload :action="uploadUrl"
list-type="picture-card"
:on-preview="handlePicPreview"
:on-success="handleFileSuccess"
:on-remove="handleRemove"
:on-error="handleError"
:file-list="fileList"
:before-upload="beforeAvatarUpload"
:limit="1">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
<span class="tip">注: 只允许上传一张图片</span>
<el-dialog :visible.sync="showImage">
<img width="100%" :src="downloadUrl + freqPatternModelForm.gnzchJgkt">
</el-dialog>
JS:
回显图片
// 回显图片
getInfo() {
// 拿到回显图片地址,getData是接口请写自己的
getData(this.id).then(data => {
if (data.result) {
this.fileList.push({
url: this.DownloadUrl + data.result.url
})
Object.assign(this.resetData, data.result)
}
})
},
钩子
handleRemove(file, fileList) {
this.form.url = ''
},
handleFileSuccess(response, file, fileList) {
this.form.url = response.result
},
handlePicPreview() {
this.showImage = true
},
这里有一个坑!!!!那就是data中的fileList和钩子返回的fileList是不同步的(除了初始化,往fileList中添加数据,data中的fileList是不会改变的)。这里简单说下我的理解
我们data中的fileList 只会在回显图片的时候使用到。假设我们在钩子中对fileList操作,则会出现图片交替问题(一闪而过然后补充一张图片)。原因是,我们上传图片后,el-upload会自动请求一次本地数据(拿到刚上传的图片,blob请求),假设我们在上传成功后再将图片的地址放入fileList,则会导致请求两次。所以我们上传成功后只需将返回的图片地址放入我们的表单中即可,无需对fileList进行操作。同理删除也是一样
当然,只要你不使用fileList 那么el-upload就不会有那一次blob请求。但这代表着你无法使用fileList那样的动画效果了...
最后贴上 download的url和action的url 防止请求地址错误(以自己家后台接口为准,仅供参考)