vue-elementui的图片上传之base64

最近处于功能需要，要做一个图片上传服务器的功能，但是因为服务器架构问题，不能用一些别的方法上传，暂时用base64的字符串。那么话不多说，开整

首先，需要你先用到elementui的Upload 上传组件，如图
当你有了这个组件的时候，你能够很容易的得到blob形式的图片数据（组件的很多方法是会把file()类型数据给到你的）。

然后就是通过一些方法，将blob转base64，如下代码

	//this.imgBlob是拿到的file对象
	//保存图片
    postServerImage(){
      this.blobToBase64(this.imgBlob).then(res => {
        //转化后的base64
        console.log('base64', res);
        //然后是post请求代码
        。。。
      })
    },
    //处理图片blob，转为base64
    blobToBase64(blob) {
      return new Promise((resolve, reject) => {
        const fileReader = new FileReader();
        fileReader.onload = (e) => {
          resolve(e.target.result);
        };
        // readAsDataURL
        fileReader.readAsDataURL(blob);
        fileReader.onerror = () => {
          reject(new Error('blobToBase64 error'));
        };
      });
    },

然后因为服务端框架原因，默认模式下好像只支持最大文件大小50k，所以需要在web.config中配置一下XML，主要就是maxReceivedMessageSize，其他类似buffer之类的默认就好

如果写上了却不起作用，应该是允许http请求的其他一些XML没配，或者name没匹配上

<bindings>
  <webHttpBinding>
    <binding name="webBindingConfig" maxReceivedMessageSize="10485760">//10M
		
    </binding>
  </webHttpBinding>
</bindings>

后端接收的话，因为base64是string格式的，所以在api或者服务接口使用string 类型去接就可以了

这里再上两行关键代码，哈哈

//以下代码用在api处理方法中
//去除base64的头部
imageStr = imageStr.Replace("data:image/png;base64,", "").Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", "").Replace("data:image/bmp;base64,", "");

//将base64转为字节数组
byte[] array = Convert.FromBase64String(imageStr);

剩下的就是新建图片文件，然后将字节数组保存