elementui把上传的图片转为base64

傷城~ 2022-03-29 12:10 1267阅读 0赞

# 使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 #

<el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
                <el-button size="small" type="primary">选择图片上传,最多上传一张图片</el-button>
              </el-upload>

# 定义methods方法,当上传文件就会触发绑定的函数，然后文件的内容就会绑定到函数的参数里面，这样用file.raw就可以获取文件的内容了。 #

getFile(file, fileList) {
         console.log(file.raw)
        },

# 然后自定义一个方法，用来把图片内容转为base64格式，imgResult就是base64格式的内容了。转为base64字符串要调用h5特性中的FileReader这个api,但是这个api不能return，所以用promise封装一下。 #

getBase64(file) {
          return new Promise(function(resolve, reject) {
            let reader = new FileReader();
            let imgResult = "";
            reader.readAsDataURL(file);
            reader.onload = function() {
              imgResult = reader.result;
            };
            reader.onerror = function(error) {
              reject(error);
            };
            reader.onloadend = function() {
              resolve(imgResult);
            };
          });
        },

# 最后调用一下 #

getFile(file, fileList) {
        
          this.getBase64(file.raw).then(res => {
          console.log(res)
          });
        },

发表评论取消回复

表情：

评论列表（有 0 条评论，1267人围观）

还没有评论，来说两句吧...

相关阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 96 阅读

相关 uni-app把网络图片转为base64的

urlTobase64(img) \{ return new Promise((resolve, reject) => \{

╰+攻爆jí腚メ/ 2022年10月11日 12:20/ 0 赞/ 489 阅读

相关图片上传(Base64)

图片上传(Base64) HTML <label for="pic_upload" class="file-update-title"> 标

野性酷女/ 2022年06月17日 11:16/ 0 赞/ 302 阅读

相关图片上传前压缩，base64图片压缩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

你的名字/ 2022年05月18日 00:58/ 0 赞/ 228 阅读

相关使用base64上传文件，后台转为MultipartFile

通常情况下，上传文件时，使用的都是file类型。我们再java后台应用只需要使用MultipartFile接收就可以了。有的时候，或许我们也会遇到使用base64进行文件上传。

我不是女神ヾ/ 2022年05月05日 09:50/ 0 赞/ 628 阅读

相关利用localResizeIMG将图片压缩转为base64上传

在进行图片上传的时候，因为有些图片太大，为了减轻服务器的压力，我们需要将图片进行压缩上传。今天总结一下利用localResizeIMG如何将图片压缩转为base64上传，其中l

我会带着你远行/ 2022年04月12日 11:20/ 0 赞/ 242 阅读

相关 elementui把上传的图片转为base64

使用组件，然后on-change绑定一个方法来获取文件信息，auto-upload设置为false即可 <el-upload action='' :on-chan

傷城~/ 2022年03月29日 12:10/ 0 赞/ 1268 阅读

相关上传图片转为base64码再以url形式传值

<td>合同图片：</td> <td> <input type="file" id="" value="" onchange="basess(this

短命女/ 2022年03月28日 10:00/ 0 赞/ 164 阅读

相关上传图片格式为base64

后端设置base64格式的图片前提：下载node.js 安装导入js脚本 ![在这里插入图片描述][20190624172552951.png]

短命女/ 2022年01月06日 07:19/ 0 赞/ 322 阅读

相关 uniapp--上传图片转base64

最近后端接口更新，需要使用图片Base64+图片类型（png/jpg等）上传; 试了好多兼容小程序的方法; 小程序参考[uni-app上传图片转base64\_网络\_

以你之姓@/ 2021年09月13日 16:02/ 0 赞/ 1258 阅读