文章目录
- 前言
- 一、base64转换为 Blob 对象的方法
- 二、使用步骤
- 1.引入工具类js
- 2.编写formData上传方法
- 3.api方法中的request代码
- 三、实际操作
- 1.html代码
- 2.js代码
- 总结
前言
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文件，且不超过500kb</div>
</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;
},
