前端上传图片，借助el-upload组件，当然，也涉及后端接口，我这儿就说前端实现。
效果图如下：
2.png
1.png
前端代码：
// html
<el-upload
list-type="picture-card"
:http-request="onImport"
:show-file-list="false"
accept="'png', 'jpeg', 'jpg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'"
>
<img
v-if="imageUrl"
:src="imageUrl"
class="avatar"
style="width: 100%; height: 100%"
/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// accept: 上传文件类型
// list-type: 文件列表的类型
// http-request: 覆盖默认的上传行为，可以自定义上传的实现
// show-file-list: 是否显示已上传文件列表，如果为true，可以显示一个列表，为false就不显示，因为这儿我的需求是上传一张图片，然后借助img标签实现回显
这儿我上传图片是采用 表单格式 提交：
// methods
onImport({ file }) {
let form = new FormData()
form.append('file', file)
this.$api.uploadFile(form).then((res) => {
let { code, data } = res
if (code == 200) {
this.$message.success('上传成功')
this.imageUrl = data
// this.$emit('success')
} else {
this.$message.error('上传失败')
}
})
},
// form定义一个表单用来做表单上传的参数，对需要的字段采用append添加
// uploadFile这就是上传方法(需要和后端进行对接)，返回的字段中，data是图片的回显地址
如有错误，欢迎指正
