如果js将本地图片转为base64，返回一个base64的promise值

### JavaScript 将本地图片转为 Base64 并返回 Promise 为了实现将本地图片转换为 Base64 编码并以 `Promise` 形式返回结果，可以采用多种方式。以下是基于文件输入控件读取本地图片并通过 `FileReader` API 转换为 Base64 的解决方案。 #### 方法一：使用 HTML 文件输入与 Axios 获取远程资源 当处理来自用户的文件上传时，通常会结合 `<input type="file">` 控件来获取图像数据。对于网络上的图片，则可以通过发送 HTTP 请求下载二进制流再进行编码操作[^1]。 ```html <input id="uploadImage" type="file"> ``` ```javascript document.getElementById('uploadImage').addEventListener('change', function(event){ const file = event.target.files[0]; if (!file) { console.error("未选择任何文件"); return; } const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { // 成功读取后的回调函数 console.log(reader.result); // 输出 base64 字符串 }; }); ``` 如果目标是从指定 URL 加载在线图片并将其转化为 Base64： ```javascript async function getBase64FromUrl(url) { try { const response = await axios.get(url, {responseType: 'blob'}); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(response.data); }); } catch (error) { throw Error(`请求失败 ${error}`); } } ``` #### 方法二：纯前端 XHR 方案 另一种不依赖第三方库的方式是利用原生的 XMLHTTPRequest 对象发起 GET 请求，并设置响应类型为 `'blob'` 来接收服务器端返回的数据[^3]。 ```javascript function getBase64Image(src) { return new Promise(function(resolve) { var xhr = new XMLHttpRequest(); xhr.open('GET', src, true); xhr.responseType = 'blob'; xhr.onload = function() { if (xhr.status === 200) { var blob = xhr.response; var oFileReader = new FileReader(); oFileReader.onloadend = function(e) { var base64 = e.target.result; resolve(base64); }; oFileReader.readAsDataURL(blob); } }; xhr.send(null); }); } // 使用示例 getBase64Image('/path/to/image.jpg') .then(function(result){console.log(result)}) .catch(console.error); ``` 这两种方法都可以有效地完成从本地或远端加载图片到 Base64 编码的任务。具体选用哪种取决于实际应用场景的需求以及项目中已有的技术栈配置情况。