浏览器有禁止访问本地资源的限制!造成你想要获取到本地图片或者文件资源获取失败的问题!经过一些列的搜索!发现复制的别人复制的博客,简直千篇一律,有些时候并不是你想要的,例如我就是用的vue就不想引用太多js库,就直接用原生的去获取文件!
获取本地文件资源的有两种方式!另外一种是获取自己公司图片资源服务器的方式!
第一种是使用jquer + new FileReader();
代码如下:

function toBase64(){
        var file = document.querySelector('input[type=file]').files[0];//获取到第一个input的type属性=file的input
        var reader = new FileReader();//构造一个新FileReader
        reader.onloadend = function () {//FileReader的触发事件【load】成功读取文件后会触发该事件,【loadend】文件读取成功或不成功时将触发该事件。【loadstart】文件读取操作开始时,将触发该事件。
            $("#base64Img").attr("style","display:inline-block");//使用jQuery的attr来设定节点样式
            $("#base64Img").attr("src",reader.result);//使用jQuery的attr来设定img标签的src路径,reader.result是FileReader读取时的二进制编码,img标签可以读取并展示!
            console.log(reader.result);//打印二进制数据
        }
        if (file) {
            reader.readAsDataURL(file);//该readAsDataURL方法用于读取指定Blob或的内容File。读取操作完成后,readyState变为DONE,并被loadend触发。那时,result属性包含数据作为数据:URL表示文件数据为base64编码的字符串
        }
    }

FileReader的方法如下:
abort**()**释:该abort方法中止读取操作。返回时,readyState将为DONE。
语法instanceOfFileReader.abort();
例外情况:
abort在没有进行任何读操作的情况下(即状态为not LOADING)引发when ;

readAsArrayBuffer**()** 释:该FileReader接口的readAsArrayBuffer()方法用于开始读取指定的内容,Blob或File。读取操作完成后,readyState变为DONE,并被loadend触发。那时,result属性包含一个ArrayBuffer表示文件数据的属性。
语法instanceOfFileReader.readAsArrayBuffer(blob);
**readAsBinaryString()**释:该readAsBinaryString方法用于开始读取指定Blob或的内容File。读取操作完成后,readyState变为DONE,并被loadend触发。那时,该result属性包含文件中的原始二进制数据。
**语法:**instanceOfFileReader.readAsBinaryString(blob);
**readAsDataURL()**释:该readAsDataURL方法用于读取指定Blob或的内容File。读取操作完成后,readyState变为DONE,并被loadend触发。那时,result属性包含数据作为数据:URL表示文件数据为base64编码的字符串。
**语法:**instanceOfFileReader.readAsDataURL(blob);
**readAsText()**释:该readAsText()方法用于读取指定Blob或的内容File。读取操作完成后,readyState将更改为DONE,将loadend触发事件,并且该result属性将文件内容包含为文本字符串。
**语法:**instanceOfFileReader.readAsText(blob[, encoding]);
以上FileReader的方法摘自链接:FileReader
以上代码片段 摘自网友:彭珂个人网
链接:彭珂个人网
这是上传图片之前的图展示;在这里插入图片描述

这个方法是使用jQuery的方法实现,上传图片展示这是上传之后展示的图片;在这里插入图片描述

第二种,是我比较喜欢的方式,直接原生来解决,不用jQuery
话不多说直接上代码:
html:

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

js:

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

可视化效果链接:https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
实现,上传立即预览的效果;
第三种获取自己公司图片资源服务器的方式;
直接上代码:

js:

tirggerFile(event){//<input type='file'/>标签绑定的事件
			var _this = this;
			var formData = new FormData();//该FormData()构造函数创建一个新的FormData对象。
			formData.append("file", event.target.files[0]);//将Event的target属性中files[0]这是多个files,如果是只选择单个则可以直接写file就行,根据自己需求来定
			_this.common.fileUploadOSS(formData,function(imgdata){   //这是发起ajax请求发送到服务器【我这是封装好的ajax请求】         
				_this.requestData.headPicUrl = imgdata.data.url;//再从服务器获取到图片路径数据
			});
		},

这种是先上传服务器,在获取服务器上这张图片的路径!

还有一种方法使用canvas获取到图片best64信息,代码如下:

let canva = document.createElement('canvas'), //创建canvas节点
	img = new Image() //构造一个image标签
	img.src = imgdata;//此处是已有的img信息,非input选取的文件信息,如果要获取选取文件的请参考上两条jQuery或原生js的方法

canva.width = this.$refs.mysvg.width.animVal.value;//给canvas赋值宽度
canva.height = this.$refs.mysvg.height.animVal.value;//给canvas赋值高度

var ctx = canva.getContext('2d');//开启2dcanvas模式
ctx.drawImage(img, 0, 0, this.$refs.mysvg.width.animVal.value, this.$refs.mysvg.height.animVal.value);//将创建的图片引入canvas做背景
document.getElementsByClassName('item2')[0].appendChild(canva);//插入到页面节点

var data = canva.toDataURL('image/svg');//获取canvas的背景图片的best64信息

希望以上对于浏览者有所帮助!好文后续分享!

Logo

前往低代码交流专区

更多推荐