vue2或者vue3图片上传功能(upload)

采用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<
  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值