图片上传
一般使用FormData携带文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片</title>
</head>
<body>
<input type="file" id="fileInput"/>
<script>
document.getElementById('fileInput').addEventListener('change', e=>{
//使用FormData携带图片文件
const fd=new FormData()
fd.append('img',e.target.files[0])
//提交到服务器,获取图片url网址使用
axios({
url:'http://...',
data:fd
})
});
</script>
</body>
</html>
图片浏览
方法一
用URL.createObjectURL()将一个file
或Blob
类型的对象转为UTF-16
的字符串
objectURL = URL.createObjectURL(Fileobject);
URL.createObjectURL()静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
方法二
基于FileReader读取图片做预览,得到的图片链接是base64字符串
const reader = new FileReader()
reader.readAsDataURL(Fileobject)
reader.onload = () => {
console.log('图片base64字符串:',reader.result)
}