vue 中使用 element-ul upload上传图片,怎么上传base64位的图片

Question

在vue中使用element-ul框架,在使用upload组件上传图片的时候, 怎么更改图片为base64上传.

upload 组件如下

---

`<template>

<div class="upload-container">
    <el-button icon='upload' :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
    </el-button>
    <el-dialog v-model="dialogVisible" :modal="false">
        <el-upload
                class="editor-slide-upload"
                action="api/productLine/saveImgInfo.do"
                :data="dataObj"
                :multiple="true"
                :file-list="fileList"
                :show-file-list="true"
                list-type="picture-card"
                :on-remove="handleRemove"
                :on-success="handleImageScucess">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-dialog>
</div>

</template>
<script>

// import { getToken } from 'api/qiniu';
import AuthStorage from '@/services/storage.js'
export default {
  name: 'editorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#20a0ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      dataObj: { token: AuthStorage.token, key: '' },
      list: [],
      fileList: []
    };
  },
  methods: {
    handleSubmit() {
      const arr = this.list.map(v => v.url);
      this.$emit('successCBK', arr);
      this.list = [];
      this.fileList = [];
      this.dialogVisible = false;
    },
    handleRemove(file) {
      const key = file.response.key;
      for (let i = 0, len = this.list.length; i < len; i++) {
        if (this.list[i].key === key) {
          this.list.splice(i, 1);
          return
        }
      }
    },
    handleImageScucess(response, file) {
      this.list.push({ url: file.response.data });
    },
    beforeUpload() {
      const _self = this;
      return new Promise((resolve, reject) => {
        getToken().then(response => {
          const key = response.data.qiniu_key;
          const token = response.data.qiniu_token;
          _self._data.dataObj.token = token;
          _self._data.dataObj.key = key;
          this.list.push({ key, url: response.data.qiniu_url });
          resolve(true);
        }).catch(err => {
          console.log(err);
          reject(false)
        });
      });
    }
  }
};

</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.upload-container {
    .editor-slide-upload {
        margin-bottom: 20px;
    }
}

</style>
`

Answer 1

element的上传是通过file的， 需要自己重新组件和接口， 通过base64的方式和普通的post提交字符串一样了。
html5有个FileReader内置函数，可以对文件进行处理以及转换成base64

var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){ 
            this.result // 这个就是base64编码了
        }

Answer 2

参考https://developer.mozilla.org...

Answer 3

`
url:就是你上传图片的路径;
function convertImgToBase64(url, callback, outputFormat){

var canvas = document.createElement('CANVAS'); 
var ctx = canvas.getContext('2d'); 
var img = new Image; 
img.src = url;
img.crossOrigin = 'Anonymous'; 
img.onload = function(){
  var width = img.width;
  var height = img.height;
  // 按比例压缩2倍
  var rate = (width<height ? width/height : height/width)/2;
  canvas.width = width*rate; 
  canvas.height = height*rate; 
  ctx.drawImage(img,0,0,width,height,0,0,width*rate,height*rate); 
  var dataURL = canvas.toDataURL(outputFormat || 'image/png'); 
  callback.call(this, dataURL); 
  canvas = null; 
};

}
convertImgToBase64(url, function(base64Img){

console.log(base64Img);

});
`