浏览器上传图片

 async uploadImage(e) {
      let _this = this;
      //上传图片并预览
      let file = e.target.files[0]; //获取第一个文件
      let fileSize = file.size / 1024 > 805;
      if (fileSize) {
        this.$message.error("上传图片大小不能超过 805kb,请重新选择图片");
        return;
      }
      console.log(file.size / 1024, "图片大小");
      this.getBase64(file).then((res) => {
        let imgF = res.split(",");
        _this.uploadImg(imgF[1]);
        console.log(imgF, "lll");
      });
      // this.base64Img=base64Img
      // this.uploadImg(base64Img)
      //  console.log(file,'图片',base64Img)
      // //
      // let img = new FileReader();
      // img.readAsDataURL(file);
      // console.log("img:",img)
      // img.onload = ({ target }) => {
      //   this.imgSrc = target.result; //将img转化为二进制数据
      //   console.log("target:",target)
      //   this.uploadImg(target.result)
      // };
      //
    },

//blob转base64
blobToBase64(blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader();
fileReader.onload = (e) => {
resolve(e.target.result);
};
fileReader.readAsDataURL(blob);
fileReader.onerror = () => {
reject(new Error("文件流异常"));
};
});
},

posted @   前端乔  阅读(206)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
历史上的今天:
2020-11-25 B站小姐姐面试分享2
2020-11-25 B站小姐姐分享第一次电话面试
点击右上角即可分享
微信分享提示