vue.js图片转Base64上传图片并预览的实现方法

Vue.js实现图片转Base64上传并预览的新方法——来自长沙网络推广的分享

在现代Web开发中，图片处理已成为前端开发者常见的工作内容之一。在处理图片上传的过程中，我们常常采用调用ajax接口并通过http方法提交的方式，例如使用post方法将图片提交给后端。这种做法往往涉及到路径问题，特别是在前后端分离的开发模式下，前后端代码可能不在同一系统目录下，部署时路径差异可能导致后期维护困难。

针对这一问题，长沙网络推广提出了一种新的解决方案：将图片转换为Base64格式后发送给后端。后端只需将接收到的Base64数据存入数据库，前端则通过调用接口直接获取Base64数据并写入img标签的src属性。这样，无论部署环境的路径如何变化，都不会影响到图片的显示。

以狼蚁网站SEO优化为例，我们可以使用Element UI的upload组件来实现这一功能。下面是一段示例代码：

```html

ref="upload"

:auto-upload="false"

:file-list="fileList"

:multiple="false"

:limit="1"

:on-exceed="handleExceed"

:http-request="uploadFiles"

accept="image/jpeg,image/gif,image/png"

action=""

:on-change="changeUpload">

选取图片

点击上传

```

在JavaScript部分，我们可以这样处理图片的上传和预览：

```javascript

// 点击上传图片，上传成功后返回图片的Base64字符串

uploadFiles() {

var that = this;

let file = this.$refs.upload.$refs['upload-inner'].$refsput; // 获取文件数据

let fileList = file.files;

var imgFile;

let reader = new FileReader(); // 使用html5读取文件

reader.readAsDataURL(fileList[0]); // 将文件转换为Base64格式

reader.onload = function(e) { // 读取完毕后调用接口

imgFile = e.target.result;

let obj = {

id: "loginLogo",

configGroup: "logo",

configItem: "loginLogo",

itemValue: imgFile

};

BaseApi.uploadFiles(obj).then((res) => {

if (res.status == 'SUCCESS') {

AlertBox('图片上传成功！', 'success', true).then(() => {

that.getSysLogo(); // 调用接口获取Base64数据

});

} else {

Alert('图片上传失败', res);

}

});

};

}

```

在界面的img标签中，我们只需要绑定`getSysLogo()`接口返回的Base64字符串即可实现图片的预览。以上就是长沙网络推广分享的图片转Base64上传并预览的实现方法，希望对大家的学习有所帮助，也请大家多多支持狼蚁SEO。

（完）