【Vue2】Vant2上传文件使用formData方式，base64图片转Blob再转File上传

---

前言

vant2上传组件传送门
使用vant2组件中的uploader组件

<van-uploader v-model="fileList" multiple capture :after-read="afterRead" @delete="onDelete" />

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、base64转换为 Blob 对象的方法

在utils文件夹下，创建一个工具类js，名叫base64toFile.js

// 转换为 Blob 对象的方法 （可复用）
export function base64ToBlob(base64Data) {
    const parts = base64Data.split(";base64,");
    const contentType = parts[0].split(":")[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
}
// 从 base64 数据中获取文件名和 mime 类型的方法 （可复用）
export function getFilenameAndMimetypeFromBase64(base64Data) {
    const fileInfo = base64Data.split(';base64,')[0].substring(5).split(':');
    const mimeType = fileInfo[0];
    const filename = fileInfo[1];
    return [filename, mimeType];
}
/**
 *  用法
// 将 base64 编码的文件数据转为 Blob 对象
const blob = base64ToBlob(res);
// 获取文件名和 mime 类型
const [filename, mimeType] = getFilenameAndMimetypeFromBase64(res);
// 将 Blob 对象转换为 File 对象
const file = new File([blob], filename, { type: mimeType });
// 上传文件
const formData = new FormData();
formData.append('file', file);

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.log(error);
});
 */

用法在上面代码里有，也就是后面的过程

二、使用步骤

1.引入工具类js

代码如下（示例）：

import {
    base64ToBlob,
    getFilenameAndMimetypeFromBase64
} from "@/utils/base64toFile.js"

2.编写formData上传方法

在src/api里面的某一个文件夹里面编写你的上传

代码如下（示例）：

import request from '@/utils/request'
// 上传图片
export function uploadImg(data) {
    return request({
        url: '/flow/common/upload',
        method: 'post',
        headers: {
            'Content-Type': 'multipart/form-data'
        },
        data: data
    })
}

根据实际情况修改url地址，

3.api方法中的request代码

在utils工具文件夹中新建request.js

import axios from 'axios'
import errorCode from '@/utils/errorCode'
import {
	getToken
} from '@/utils/auth'
import {
	Dialog,
	Notify
} from 'vant';
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
	// axios中请求配置有baseURL选项，表示请求URL公共部分
	// baseURL: '/',
	baseURL: process.env.VUE_APP_BASE_API,
	// 超时
	timeout: 40000
})
// request拦截器
service.interceptors.request.use(config => {
	// 是否需要设置 token
	const isToken = (config.headers || {}).isToken === false
	// config.headers['Authorization'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
	// config.headers['token'] = sessionStorage.getItem('token') // 让每个请求携带自定义token 请根据实际情况自行修改
	config.headers['Authorization'] = 'Bearer ' + getToken()
	// get请求映射params参数
	if (config.method === 'get' && config.params) {
		let url = config.url + '?';
		for (const propName of Object.keys(config.params)) {
			const value = config.params[propName];
			var part = encodeURIComponent(propName) + "=";
			if (value !== null && typeof (value) !== "undefined") {
				if (typeof value === 'object') {
					for (const key of Object.keys(value)) {
						let params = propName + '[' + key + ']';
						var subPart = encodeURIComponent(params) + "=";
						url += subPart + encodeURIComponent(value[key]) + "&";
					}
				} else {
					url += part + encodeURIComponent(value) + "&";
				}
			}
		}
		url = url.slice(0, -1);
		config.params = {};
		config.url = url;
	}
	return config
}, error => {
	console.log(error)
	Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
	// 未设置状态码则默认成功状态
	const code = res.data.code || 200;
	// 获取错误信息
	const msg = errorCode[code] || res.data.msg || errorCode['default']
	// 二进制数据则直接返回
	if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
		return res.data
	}
	if (code === 401) {
		return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
	} else if (code === 402) {
		Dialog.alert({
			message: res.data.msg,
			confirmButtonColor: "#3478F3",
		}).then(() => {

		});
		return Promise.reject(new Error(msg))
	} else if (code === 403) {
		return Promise.reject(new Error(msg))
	} else if (code === 500) {
		Notify({
			type: 'danger',
			message: msg
		});
		return Promise.reject(new Error(msg))
	} else if (code === 601) {
		Notify({
			type: 'warning',
			message: msg
		});
		return Promise.reject('error')
	} else if (code !== 200) {
		Dialog({
			title: '错误',
			message: msg
		});
		return Promise.reject('error')
	} else {
		return res.data
	}
},
	error => {
		console.log('err' + error)
		let {
			message
		} = error;
		if (message == "Network Error") {
			message = "后端接口连接异常";
		} else if (message.includes("timeout")) {
			message = "系统接口请求超时";
		} else if (message.includes("Request failed with status code")) {
			message = "系统接口" + message.substr(message.length - 3) + "异常";
		}
		Notify({
			message: message,
			type: 'danger',
			duration: 5 * 1000,
		});
		return Promise.reject(error)
	}
)
export default service

request.js有许多的工具类引入，不过一般的vue项目应该都有脚手架，如果没有的，或者没见过这个request.js的，可以去翻一下若依后台管理系统的源码。这里只作示例，告知请求方法中的封装是这些代码

---

三、实际操作

1.html代码

<van-uploader v-model="fileList" multiple capture :after-read="afterRead" @delete="onDelete" />

2.js代码

import方法

import {
    base64ToBlob,
    getFilenameAndMimetypeFromBase64
} from "@/utils/base64.js"
import {
    uploadImg, // 上传拍照的图片
} from "@/api/upload.js"

data变量

fileList: [],

methods方法

afterRead(res) {
    // 此时可以自行将文件上传至服务器
    console.log(res, "file");
    // base64格式赋值, data:image/jpeg;base64,/9j.......
    const data = res.content
    // 将 base64 编码的文件数据转为 Blob 对象
    const blob = base64ToBlob(data);
    // 获取文件名和 mime 类型
    const [filename, mimeType] = getFilenameAndMimetypeFromBase64(data);
    // 将 Blob 对象转换为 File 对象
    const file = new File([blob], res.file.name, { type: mimeType });
    // 写入formData
    const formData = new FormData();
    formData.append('file', file);
    // 执行上传方法
    uploadImg(formData).then(res => {
        console.log(res, "上传结果", this.fileList);
        this.form.files.push(res.data) // 写入form参数
    })
},

afterRead为vant组件 上传模块的回调
它的回调参数的content是一个base64图片 data:image/jpeg;base64,/9j.......

这段代码的文件名有可能会拿不到，毕竟是base64图片文件，所以filename可以自己定义，

// 获取文件名和 mime 类型
const [filename, mimeType] = getFilenameAndMimetypeFromBase64(res);
// 将 Blob 对象转换为 File 对象
const file = new File([blob], filename, { type: mimeType });

总结

除了base64格式的文件，可以用formData方式上传，别的例如文档doc、pdf也可以。
只要选择文件上传，拿到的回调参数里面，有一个是file类型的，那就是这个。
把这个file添加到formData，然后也是一样的上传。
如下

<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
    <el-upload class="upload-demo" :file-list="uploadFileList" drag
     :on-change="getFiles" 
    :on-remove="getFiles"
        action="" :auto-upload="false" multiple>
        <i class="el-icon-upload">i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传em>div>
        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kbdiv>
    el-upload>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定el-button>
        <el-button @click="upload.open = false">取 消el-button>
    div>
el-dialog>

// 提交上传文件
submitFileForm() {
    let formData = new FormData();
    this.files.forEach(f => formData.append("files", f.raw))
    fileUpload(formData).then(res => {
        this.$modal.msgSuccess("上传成功")
    })
    this.upload.open = false;
},
getFiles(file, fileList) {
    this.files = fileList;
},