JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

我们知道，img的src属性或background的url属性，可以通过被赋值为图片网络地址或base64的方式显示图片。
在文件上传中，我们一般会先将本地文件上传到服务器，上传成功后，由后台返回图片的网络地址再在前端显示。
通过FileReader的readAsDataURL方法，我们可以不经过后台，直接将本地图片显示在页面上。这样做可以减少前后端频繁的交互过程，减少服务器端无用的图片资源，代码如下：

iview官网查看

data(){return{iconFileSrc: null, // 展示再页面上的图片路径editFormData: {iconFile: null // 传给后台的图片路径}}}

      <Card title="图片素材" class="mt10"><FormItem label="应用图标" prop="iconFile"><div v-if="iconFileSrc" class="upload-icon"><img height="100%" :src="iconFileSrc"></div><Uploadname="iconFile"  // 上传的文件字段名type="drag" // 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）v-model="editFormData.iconFile"style="display:inline-block;width:58px;":max-size="200" // 文件大小限制，单位 kbaccept=".png" //接受上传的文件类型:format="['png']" //支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用:before-upload="iconFileBeforeUpload" // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传action="//"  // 上传的地址，必填><div v-if="!editFormData.iconFile" style="width: 58px;height:58px;line-height:  58px;"><Icontype="md-add"size="20"></Icon></div><span v-else class="cp">更换</span></Upload><div class="tips">请上传200K以内的PNG格式图片，尺寸为512X512</div></FormItem></Card>

  // 应用图标上传前iconFileBeforeUpload (file) {console.log(file)if (file.type !== 'image/png') {return this.$Notice.warning({title: '上传格式错误',desc: '上传200K以内的PNG格式图片，尺寸为512X512'})}if (file.size > 204800) {return this.$Notice.warning({title: '文件超出限制大小',desc: '上传200K以内的PNG格式图片，尺寸为512X512'})}this.editFormData.iconFile = file// 展示的时候 使用base64进行展示  传入数据库的时候 还是使用原始的file 并进行forData转化const reader = new FileReader()reader.readAsDataURL(file) // 读出 base64reader.onload = () => {// 图片的 base64 格式, 可以直接当成 img 的 src 属性值const _base64 = reader.resultthis.iconFileSrc = _base64}return false},

file

对于图片上传，我们也可以先将图片转换为base64进行传输，此时由于传输的图片内容就是一段字符串，故上传接口可以当做普通post接口处理，当图片传输到后台后，可以在转换为文件实体存储。
当然，考虑到base64转换效率及其本身的大小，本方法还是适合于上传内容简单或所占内存较小的文件。
参考：https://www.cnblogs.com/hhhyaaon/p/5929492.html

JavaScript通过 new FileReader() 获取图片base64 无组件上传图片相关推荐

Java通过图片url地址获取图片base64位字符串的两种方式
工作中遇到通过图片的url获取图片base64位的需求.一开始是用网上的方法,通过工具类Toolkit,虽然实现的代码比较简短,不过偶尔会遇到图片转成base64位不正确的情况,至今不知道为啥. 之后 ...
微信chooseImage，getLocalImgData调取相机拍照，获取图片base64
<a href="javascript:void(0)" onclick="use_wx_camera()">调取微信拍照</a> &l ...
html5无组件上传,ASP上传漏洞无组件上传图片文件(转载)
对于上传漏洞的查找,仍是从源文件入手,目标有两个,一个是FilePath(文件路径),另一个则是FileName(文件名称). 一.FilePath 说到FilePath,有些朋友可能感到陌生,但要提 ...
asp html 生成图片,asp无组件上传图片并生成缩略图
先创建一文件夹,并创建虚拟目录或站长点. 1.增加上传页xAdd.html 无组件上传 "POST"name="myform"action="xSav ...
不同浏览器获取图片base64字符串
在上传图片后进行预览的时候,在Chrome,Foxfire,360等主流浏览器中都可以使用FileReader对象来获取base64来预览图片,但是在IE10以下的版本就爱莫能助了但是有解决办法: / ...
RIDE：获取图片base64
python脚本中: import base64filepath=r'D:\图片集\0\7102528551.jpg' f=open(filepath, 'rb') print(f) ls_f = b ...
人脸检测，身份证扫描调三方接口获取图片base64路径转file，存入数据库（Vue）
<template> <div class="PersonInfoAuthPage"> <Header headerTitle="个人信息认 ...
asp无组件上传图片动态保存文件名 upload.inc逐句翻译
先上解释代码,后面跟上实用inc代码及调用方法<SCRIPT RUNAT=SERVER LANGUAGE=VBSCRIPT> dimupfileStreamClass upload '类名 ...
html 无组件上传图片,无组件上传图片到数据库中，最完整解决方案
::::::: 此程序属扬子原创 :::::::::::::::::: :::::: 在sql2000,2000s中测试通过:::::::: :::::::联系我:qq:21112856,email: ...

JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

JavaScript通过 new FileReader() 获取图片base64 无组件上传图片相关推荐

最新文章

热门文章