vue上传本地文件，或把base64文件下载展示

最新推荐文章于 2024-08-08 09:42:35 发布

是小张呀丶

最新推荐文章于 2024-08-08 09:42:35 发布

阅读量883

点赞数

文章标签： vue.js 前端图像处理

原文链接：https://blog.csdn.net/weixin_30606669/article/details/97635302

版权

这篇博客介绍了如何使用JavaScript实现图片的上传和下载功能。通过FileReader API读取本地图片为Base64编码，然后将Base64转换为Blob对象，最后创建一个隐藏的下载链接实现图片的本地下载。这是一个关于前端开发中图片处理的基础教程。

摘要由CSDN通过智能技术生成

 <input type="file" name ref="ipt" @change="uploading" accept="image/png" id />

      //this.url就是你当前的图片，可以进行展示
  uploading() {
      var rd = new FileReader();
      //this.$refs.ipt.files[0]上传服务器的时候，一般传递的就是这个
      rd.readAsDataURL(this.$refs.ipt.files[0]);
      let that = this;
      rd.onloadend = function () {
        that.url = this.result;
      };
    },

//上面是将本地图片改编成成base64图片

//第一个参数是地址，第二个参数是名称  
 downloadFile(content, fileName) {
      //下载base64图片
      var base64ToBlob = function (code) {
        let parts = code.split(";base64,");
        let contentType = parts[0].split(":")[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType,
        });
      };
      let aLink = document.createElement("a");
      let blob = base64ToBlob(content); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },

//上面是将base64图片下载到本地