大家好，又见面了，我是你们的朋友全栈君。
js读取 input file 文件的两种方式：
代码语言：javascript复制<div id="localImag">
<img id="preview" src="" width="150" height="180" style="display: block; width: 150px; height: 180px;">
<input type="file" name="img" id="docfile" style="width:150px;" onchange="setImagePreview();">
</div>1.使用FileReader读取图片（转化为base64）
代码语言：javascript复制function setImagePreview() {
var docObj = document.getElementById("docfile");
var imgObjPreview = document.getElementById("preview");
console.log(docObj.files[0])
if (docObj.files && docObj.files[0]) {
var reader = new FileReader();
reader.readAsDataURL(docObj.files[0]);//发起异步请求
reader.onload = function(){
//读取完成后，数据保存在对象的result属性中
// console.log(this.result)
imgObjPreview.src=this.result
}
}
}主要使用readAsDataURL去完成转换base64，如果是文档，也可以用readAsText(file,encoding)去读取。
方法
FileReader提供了如下方法：
readAsArrayBuffer(file) | 按字节读取文件内容，结果用ArrayBuffer对象表示 |
|---|---|
readAsBinaryString(file) | 按字节读取文件内容，结果为文件的二进制串 |
readAsDataURL(file) | 读取文件内容，结果用data:url的字符串形式表示 |
readAsText(file,encoding) | 按字符读取文件内容，结果用字符串形式表示 |
abort() | 终止文件读取操作 |
readAsDataURL和readAsText较为常用，这里只对这两者进行说明。
2.使用 window.URL.createObjectURL 读取图片（转化为blod）(推荐)
代码语言：javascript复制function setImagePreview() {
var docObj = document.getElementById("docfile");
var imgObjPreview = document.getElementById("preview");
console.log(docObj.files[0])
if (docObj.files && docObj.files[0]) {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
}总结
按照前辈们的说法，creatObjectURL可以有更好的性能，或许是浏览器自带接口的原因, 可以处理的更快。
而且最近做了一个需要上传图片预览的项目，用的最简单的input file上传，最开始想到的就是用filereader实现前端预览，很简单，见前面的第一段代码，在自己手机上测试，没问题。但在某些奇葩手机上，比如oppo 安卓4.3在我们app的webview内通过打开相册上传发现无法预览图片！但在该手机的微信，浏览器内上传均可以！所以推荐使用window.URL.createObjectURL
最后如果需上传，可以使用form或者使用ajax上传，form表单提交比较简单，就不介绍。
ajax提交的时候原理还是获取到obj.files[0]后。利用实例化的FormData 上传文件。如：
代码语言：javascript复制let fileObj = this.$refs.fileObj.files[0]; // js 获取文件对象
var formData = new FormData();
formData.append('file', fileObj);
axios({
url: process.env.URL_PATH '/mallSealApply/uploadSealApply',
method: 'post',
headers: {'Authorization': this.$store.state.token},
data: formData
})发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/160972.html原文链接：https://javaforall.cn
