FileReader.readAsDataURL图像数据已读到，显示不出来？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了FileReader.readAsDataURL图像数据已读到，显示不出来？相关的知识，希望对你有一定的参考价值。
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" language="JavaScript">
var file , result;
function myLoad()
file = document.getElementById('file').files[0];
result = document.getElementById('result');
if(typeof FileReader == 'undefined')
result.innerHTML = "你的浏览器不支持 FileReader";
file.setAttribute("disabled","disabled");
function readAsDataURL()
file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.
file);
reader.onload = function(e)
result.innerHTML = "<img src=" + reader.result +"/>";
;
function readAsBinaryString()
file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function(e)
result.innerHTML = reader.result;
;
function readAsText()
file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload=function(e)
result.innerHTML = reader.result;
;
</script>
</head>
<body onload="myLoad();">
<p>
<input type="file" id='file'/>
<input type='button' id="bt_DataURL" value="读取图片" onclick="readAsDataURL();"/>
<input type="button" id="bt_BinaryString" value="读取二进制字符串" onclick="readAsBinaryString();"/>
<input type="button" id="bt_textString" value="读取文本信息" onclick="readAsText();"/>
</p>
<div id="result"></div>
</body>
</html>
2. reader.
3.file);
reader.onload = function(e)
这个地方的代码有问题，将中间两行(2,3)的代码改为：
reader.readAsDataURL(file);
文件的上传和下载
上传采用的是FormData https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/readAsDataURL
下载采用的是a标签的形式
import Axios from \'axios\'
class Utils {
downloadFile(url, params) {
Axios.get(url, {
params,
responseType: "blob",
headers: {
Authorization: localStorage.getItem("token"),
}
}).then(res => {
if (res.data) {
let urls = window.URL.createObjectURL(res.data);
let link = document.createElement("a");
link.style.display = "none";
link.setAttribute("download", "export.xls");
link.href = urls;
document.body.appendChild(link);
link.click();
}
})
}
uploadFile(file, url) {
return new Promise((resolve, reject) => {
if (file) {
let formData = new FormData();
formData.append("file", file);
Axios.post(url, formData, {
headers: {
"Content-type": "multipart/form-data",
Authorization: localStorage.getItem("token"),
}
}).then(resolve).catch(reject)
} else {
reject(new Error(\'没有上传文件！\'))
}
})
}
}
export default new Utils();import Utils from \'../../Utils/Utils.js\'
使用:
// 下载
let obj = Object.assign({}, this.queryInfo);
// download.downloadFile("api/manager/corInvoice/export",obj)
// 上传
download.uploadFile(file, "api/manager/corInvoice/import")
.then((res) => {
if (res.status == 200) {
this.$message.success("导入文件成功！");
this.initTable();
}
})
.catch((err) => {
console.log(err);
});以上是关于FileReader.readAsDataURL图像数据已读到，显示不出来？的主要内容，如果未能解决你的问题，请参考以下文章