base64转file文件 vue

vue、elementui、base64编码转file文件。

需求：拿到的是一个base64编码的数据，希望转成file文件上传到后端，并返回url，到form表单进行回显。首先找了一张本地图片到该网站https://tool.jisuapi.com/pic2base64.html转base64编码

其中A部分data url为：
Data URI scheme语法：

data:image/jpg;    声明数据协议及类型名称
base64,            编码形式为base64
/9j/4AAQSkZ……    base64编码结果

之后便是实现base64编码转File文件，在这里参考了，膜拜大佬！
https://blog.csdn.net/yin13037173186/article/details/83302628
https://blog.csdn.net/Smallsun_229/article/details/100145153

1，在form表单中使用el-upload，这里没贴出css，只是为了提及涉及到的函数doAvatarFileUpload

<el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
            <el-form-item label="照片" prop="picture">
              <el-upload
                class="avatar-uploader"
                action=""
                :http-request="doAvatarFileUpload"
                :show-file-list="false"
                :auto-upload="true"
              >
                <img v-if="form.picture" :src="form.picture" class="avatar"/>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
 </el-form>

2，methods：

methods: {
	//模拟拿到base64编码
    getIdentityInfo() {
      this.form.picture= 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD//gAUU29mdHdhcmU(...省略n个字符)Af/2Q=='
      var file = this.dataURLtoFile(this.form.picture, 'docpic.jpg')
      this.doAvatarFileUpload(file)
      this.open = true
    },
    //照片上传
    doAvatarFileUpload(file) {
      const loading = this.$loading({
        lock: true,
        text: '正在上传...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.base64TofileUpload(file).then((res) => {
        loading.close()
        if (res.code == 200) {
          this.$set(this.form, 'picture', res.data.url)
          console.log('this.form.picture' + this.form.picture)
        } else {
          this.msgError(res.msg)
        }
      })
    },
    
    //将base64转换为file
    dataURLtoFile: function(dataurl, filename) {
      var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, { type: mime })
    },
    }

在上面 中注意bstr = atob(arr[1]),这里主要是解码，可以去这里了解
https://www.runoob.com/jsref/met-win-atob.html
其次type: mime，中

 mime = arr[0].match(/:(.*?);/)[1],

即为mime = image/jpeg，下面这个网址了解一下mime吧。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types

3，upload.js

export function base64TofileUpload(fileobj) {
  let param = new FormData();
  // 上传文件对象 名称file与后台控制器参数要一致
  param.append("file", fileobj);
  console.log(param, 7455);
  return request({
    method: "post",
    // 上传地址
    url: "/common/upload",
    // 定义上传头
    headers: { "Content-Type": "multipart/form-data" },
    data: param
  });
}

上面中注意是param.append(“file”, fileobj);
以往可能是这样写： param.append(“file”, fileobj.file);

4，全局挂载base64TofileUpload方法
main.js

import { base64TofileUpload } from "@/utils/upload";
Vue.prototype.base64TofileUpload = base64TofileUpload;