采用element ui中upload组件上传,目前支持上传单张图片,如果多张可进行更改。
一、页面上组件使用
注意:①如果是多张图片,file-list会用到。②name是申明上传文件的格式,可以和后端商量,有时候上传图片后端只需要image格式,但有时候后端会把图片和文件定义成一种格式即file。③action。图片上传的接口地址,通常是公司的服务器,这个地址不能直接填测试地址,会报跨域问题,需要知道本地开发从哪里开始代理,我这里是从api开始代理,所以action后面为api+图片接口地址。④v-if控制图片上传成功后回显,v-else则是控制未上传图片显示+号。
<el-upload
ref='uploadImg'
:action="uploadUrl"
class='avatar-uploader'
lazy
:show-file-list="false"
:on-success="handleBannerSuccess"
:before-upload="beforeEditAvatarUpload"
:on-error="handleBannerError"
:on-change="handleChange"
:file-list="fileList"
name="file"
>
<img v-if="addData.bannerUrl" :src<