一 , 项目根路径npm i vant , 安装vant组件库 ,
main.js中引入并注册vant
二 , 页面中使用van-uploader上传文件的组件
第一种方法 : 在提交表单时拿到上传的图片文件 , 转成base64 , 但在提交的函数内部打印ar还是空数组 , 不知道是什么原因 , 应该跟作用域有关系 , 研究半天没解决, 希望有知道的大佬指点下 , 然后就想出了第二种方法解决的
<template><div><van-form ref="formRef"><van-field><template #input><van-uploader v-model="fileList" multiple accept="image/*" /></template></van-field><van-field><template #button><van-button type="info" native-type="submit" @click="tj">提交</van-button></template></van-field><img :src="picPath" alt=""></van-form></div></template><script>export default {name: '',data() {return {// 上传的文件列表fileList: [],// 图片路径picPath: "",arr:[]}},methods: {//点提交时tj() {console.log("提交表单");// 上传的图片let files = this.fileList[0].file//转码base64let reader = new FileReader();let imgFile;reader.readAsDataURL(files);reader.onload = e => {imgFile = e.target.result;this.arr = imgFile.split(",");// arr[1] 就是图片的 Base64加密字符串console.log(this.arr[1]);//base64字符串拼接形成图片的src路径this.picPath = 'data:image/png;base64,' + arr[1]}//这里的this.arr还是之前的空数组, 所以这里打印出 undefinedconsole.log(this.arr[1]);}}}</script><style lang="" scoped></style>
第二种方法 : 在van-uploader组件自带的after-read回调函数中拿到上传的图片文件 , 转成base64,
再点提交的时候打印this.arr[1]已经变成base64字符串了, 可以提交表单时携带
<template><div><van-form ref="formRef"><van-field><template #input><van-uploader v-model="fileList" multiple accept="image/*" :after-read="afterRead" /></template></van-field><van-field><template #button><van-button type="info" native-type="submit" @click="tj">提交</van-button></template></van-field></van-form></div></template><script>export default {name: '',data() {return {// 上传的文件列表fileList: [],arr: []}},methods: {// 选择图片后触发afterRead(e) {// 上传的图片console.log(e.file);let reader = new FileReader();let imgFile;reader.readAsDataURL(e.file);reader.onload = e => {imgFile = e.target.result;this.arr = imgFile.split(",");// arr[1] 就是图片的 Base64编码字符串console.log(this.arr[1]);}},tj() {//这里打印this.arr[1]已经变成base64字符串了, 可以提交表单时携带console.log(this.arr[1]);}}}</script><style lang="" scoped></style>
