zoukankan      html  css  js  c++  java
  • 使用element的upload组件实现上传图片功能

    一、需求:

    做一个背景图上传插件,并且将获取到的文件流转换为base64编码。

    二、实现方案:

    • 使用element组件库的upload组件
    • 使用FileReader构造函数将文件流转换为base64编码

    三:代码:

    <template>
      <div>
        <el-upload action="#" :file-list="fileList" :before-upload="changeToBase64"></el-upload>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          fileList: [
            {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
            {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
          ]
        }
      },
      methods: {
        changeToBase64(file) {
          // console.log(file);
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            console.log(this.result); //this.result即为文件流的base64编码
          }
        }
      }
    }
    </script>
    
    <style>
    
    </style>
    View Code
    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    ABAP术语-Interface
    ABAP术语-Interface Parameter
    ABAP术语-Implementation
    ABAP术语-IDOC
    ABAP术语-IAC (Internet Application Components)
    ABAP术语-HTML
    ABAP术语-Function Module
    ABAP术语-Function Library
    ABAP术语-Function Group
    PyCharm的小技巧
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/11465913.html
Copyright © 2011-2022 走看看