表单中有个上传图片,表单创建分2次调用接口
图片上传一个接口,每次上传成功,返回一个图片保存的id,然后每次上传图片都会重新赋值新的fileId ,再调用创建表单接口
上传成功之后,调用获取图片接口得到图片的base64,然后拼接url渲染图片
不用limit限制文件个数,使用file-list可以拿到图片的列表
如果用limit限制上传个数的话,上传了一张图片,只有先选择删除它,才能再上传图片。
不限制的话,可以直接点击图片,然后直接选择上传
<el-upload
ref="upload" action="http://localhost:8080/sys/file/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:on-success="handleSuccess"
:on-change="handleChange"
:file-list="fileList"
:show-file-list="false"
:on-exceed="handleExceed"
:auto-upload="false"
:headers="myHeaders"
name="files"
>
<el-button v-if="row.fileId==null" size="small" type="primary">上传图片</el-button>
<el-image v-else ref="img" style="width: 100px; height: 100px"
:src="url"
:lazy="true"
fit="fill"
/>
</el-upload>
data() {
return {
url: null, // 路径
fileList: [], // 文件列表
myHeaders: { key: 'xxx' }, //请求头
}
}
methods: {
handleChange() {
if (this.fileList.length === 0) {
this.$refs.upload.submit()
}
},
handleSuccess(res) {
this.row.fileId = res.data[0].id
},
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。