vue页面el-upload组件实现以base64编码上传图片

第一步、编写视图代码即html代码el-upload是vue的上传文件的组件
具体可百度vue组件细节就不多说了
在这里插入图片描述
div标签中用于展示图片
需要注意的组件中几个属性
ref:清除已上传图片的缓存的
action:填写上传图片接口如果用base64方法传给后端留空就行了
on-remove:删除图片回调
on-change:图片上传回调
第二步、编写javascript中的代码
1.清除图片缓存代码

cancel() {
      this.$refs.clearImage.clearFiles();
      this.open = false;
      this.reset();
    },

2.删除图片回调

deleteImg(index){
      this.form.cover = "";
    },

3.上传图片回调很重要 过程中将文件转换为base64编码放进要提交的到后端的值中

uploadImage(file) {
      this.file = file.raw;
      if (file.size > 16777216) {//限制文件的大小
        this.$Message.error(file.name + '大小超过16M!');
        this.file = null //超过大小将文件清空
      }else{
        //读取文件的字符流
        const reader = new FileReader();
        //将文件读取为 DataURL 以data:开头的字符串
        reader.readAsDataURL(this.file);
        reader.onload = e => {
          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          const code = e.target.result;
          this.form.cover = code;
        }
      }
      return false;
    },

最后后端处理base64编码以url方式存储图片到数据库,然后返回url地址到前端就大功告成了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值