Vue element-ui 实现图片上传预览删除功能,以base64字符串上传到服务器

背景

图片上传一般都是通过调用文件上传接口,返回图片地址,我们用拿到的图片地址进行相应操作,如表单提交等;

但是最近有一个朋友私信我,他们目前没有做图片管理,所以需要前端将图片转换为base64的形式进行上传,将图片转化为base64,然后提交这个转换后的字符串。

接下来我们就做了一个上传图片后隐藏上传按钮,可以预览,可以删除的功能。

实现方式

通过element-ui提供的upload方法进行上传,获取上传的file文件,进行转化,提交。

实现代码

HTML代码:

  <div class="main">
    <el-upload
      :class="{ hide: hideUploadEdit }"
      action=""
      :on-change="getImageFile"
      :on-remove="handlePicRemove"
      :on-preview="handlePicPreview"
      :limit="1"
      list-type="picture-card"
      :auto-upload="false"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <div class="martop">下面是用来回显的图片</div>

    <el-image :src="imageUrl" class="imgwidth">
      <div slot="error" class="image-slot">
        <i class="el-icon-picture-outline"></i>
      </div>
    </el-image>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

JS代码:

export default {
  data() {
    return {
      imageUrl: "",
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      hideUploadEdit: false, // 是否隐藏上传按钮
    };
  },
  methods: {
    // 获取图片信息
    getImageFile(file, fileList) {
      console.log("fileList", fileList);
      this.getImageBase64(file.raw).then((res) => {
        console.log("res", res);
        this.imageUrl = res;
      });
      // 大于1张隐藏
      this.hideUploadEdit = fileList.length >= 1;
    },
    //转换成base64方法
    getImageBase64(file) {
      return new Promise(function (resolve, reject) {
        let newImagereader = new FileReader();
        let imgInfo = "";
        newImagereader.readAsDataURL(file);
        newImagereader.onload = function () {
          imgInfo = newImagereader.result;
        };
        newImagereader.onerror = function (error) {
          reject(error);
        };
        newImagereader.onloadend = function () {
          resolve(imgInfo);
        };
      });
    },
    //删除
    handlePicRemove(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
      this.imageUrl = "";
    },
    //预览
    handlePicPreview(file) {
      console.log("file", file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};

CSS代码:

.main {
  width: 400px;
  height: 500px;
}
.martop {
  margin-top: 20px;
}
.imgwidth {
  width: 100px;
  height: 100px;
}
.image-slot {
  width: 100px;
  height: 100px;
}
.image-slot i {
  font-size: 100px;
}
.hide .el-upload--picture-card {
  display: none;
}

实现效果

上传前:

Vue element-ui 实现图片上传预览删除功能,以base64字符串上传到服务器

上传后:

Vue element-ui 实现图片上传预览删除功能,以base64字符串上传到服务器

预览时:

预览时

删除后:

删除后

这样就可以实现效果了,当然这只是一个比较简单的demo,大家可以根据自己项目进行修改。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue element-ui 实现图片上传预览删除功能,以base64字符串上传到服务器

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们