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

举报
达拉崩巴斑得贝迪卜多 发表于 2021/12/21 00:37:02 2021/12/21
【摘要】 我们知道,img的src属性或background的url属性,可以通过被赋值为图片网络地址或base64的方式显示图片。 在文件上传中,我们一般会先将本地文件上传到服务器,上传成功后,由后台返回图片的网...

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

iview官网查看

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

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
      <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-else class="cp">更换</span>
            </Upload>
            <div class="tips">请上传200K以内的PNG格式图片,尺寸为512X512</div>
          </FormItem>
        </Card>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  // 应用图标上传前
    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) // 读出 base64
      reader.onload = () => {
        // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
        const _base64 = reader.result
        this.iconFileSrc = _base64
      }
      return false
    },

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

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

文章来源: lvsige.blog.csdn.net,作者:祥子的小迷妹,版权归原作者所有,如需转载,请联系作者。

原文链接:lvsige.blog.csdn.net/article/details/109311762

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200