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><Upload
              name="iconFile"// 上传的文件字段名
              type="drag"// 上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
              v-model="editFormData.iconFile"
              style="display:inline-block;width:58px;":max-size="200"// 文件大小限制，单位 kb
              accept=".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;"><Icon
                  type="md-add"
                  size="20"></Icon></div><span v-elseclass="cp">更换</span></Upload><divclass="tips">请上传200K以内的PNG格式图片，尺寸为512X512</div></FormItem></Card>

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

file

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