前端上傳圖片胁黑，借助el-upload組件涩盾，當(dāng)然，也涉及后端接口捕捂，我這兒就說前端實(shí)現(xiàn)瑟枫。
效果圖如下：
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: 覆蓋默認(rèn)的上傳行為斗搞，可以自定義上傳的實(shí)現(xiàn)
// show-file-list: 是否顯示已上傳文件列表，如果為true慷妙，可以顯示一個列表僻焚，為false就不顯示，因?yàn)檫@兒我的需求是上傳一張圖片膝擂，然后借助img標(biāo)簽實(shí)現(xiàn)回顯
這兒我上傳圖片是采用 表單格式 提交：
// 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定義一個表單用來做表單上傳的參數(shù)虑啤，對需要的字段采用append添加
// uploadFile這就是上傳方法(需要和后端進(jìn)行對接)，返回的字段中猿挚，data是圖片的回顯地址
如有錯誤咐旧，歡迎指正
