el-upload上传图片base64格式转换

html结构


<el-form-item label="二维码缩略图" prop="qrcode">
           <div class="img-show" v-if="imgUrl">
             <img :src="imgUrl" class="avatar">
             <span class="actions">
		            <span class="item">
		            	<i class="el-icon-delete" @click="del()"></i>
		            </span>
	          </span>
           </div>
           <el-upload
             v-else
             class="avatar-uploader"
             action="#"
             :on-success="handleQrCodeUploadSuccess"
             accept=".png"
             :before-upload="beforeQrCodeUpload"
             :on-change="imgPreview"
             :auto-upload="false"
             :show-file-list="false">
             <i class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </el-form-item>

js

      imgUrl:'',
      imgcode:'',

    handleQrCodeUploadSuccess(file) {

    },
    beforeQrCodeUpload(file) {
      console.log(file,'file')
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('二维码缩略图大小不能超过 2MB!');
      }
      return isLt2M;
    },
    del(){
      this.imgUrl =  '';
      this.dialogUrl = '';
      this.imgcode = ''
    },
    imgPreview(file){
      //生成临时缩略图
      this.imgUrl =  URL.createObjectURL(file.raw);
      var reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = (e) => {
        // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
        this.imgcode = e.target.result.split('base64,')[1];
      }
    },
      crud.form.thumbnailBase64 = this.imgcode
      crud.form.thumbnail = this.imgUrl

这里上传通过转换imgcode 为base64.

posted @ 2022-03-04 19:05  打个大大西瓜  阅读(329)  评论(0)    收藏  举报