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

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

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