Vue使用vant上传图片（点击按钮弹框上传图片）

 前言：假期在家没事干，写个小小的项目吧，写的过程中遇到了对我来说是个难题的图片上传，看了很多的博客，琢磨了半天终于写出来了，咱就在这里浅浅的总结一下吧。

---

先看下效果吧~~

---

html部分

点击弹框，具体请参考Vant中Popup组件

<template>
<div class="box">
  <van-cell is-link @click="show = true" class="btn box_btn">点击弹框</van-cell>
     <van-popup v-model:show="show" round>
	    <div class="box-content">
		  <p class="title">标题</p>
		  <van-form @submit="onSubmit">
		  <van-cell-group inset>
			<van-field
			v-model="contenttext"
			name="输入文字"
			placeholder="请输入文字"
			:rules="[{ required: true, message: '请输入输入文字' }]"
			/>

			<div class="uploader">
			  <van-uploader 
                :after-read="afterRead" 
                v-model="fileList" 
                multiple 
                :max-count="1" 
                :max-size="1080 * 2400" 
                @oversize="onOversize"
                />
			    <!-- 文件预览：v-model="fileList" multiple
                  限制上传数量：:max-count="1"
                  限制上传大小：:max-size="500 * 1024" @oversize="onOversize" -->
              <p>请上传二维码</p>
			</div>
		
			</van-cell-group>

			  <div class="submit_btn">
				<van-button round block type="primary" @click="show = false">
				  取消
				</van-button>
				<van-button round block type="primary" native-type="submit" @click="w_btn">
				  提交
				</van-button>
			  </div>
		    </van-form>
		</div>
	</van-popup>
</div>
</template>

 引入部分

import { Toast } from 'vant';
import { Button } from 'vant';
import { Form, Field, CellGroup } from 'vant';
import { Uploader } from 'vant';
import { present } from "@/api/present.js";
import { up_photo } from "@/api/up_photo.js";

 present是封装的点击提交的请求

up_photo是封装的图片上传的请求

methods部分

export default {
  components: {
	[Button.name]: Button,
	[Form.name]: Form,
	[Field.name]: Field,
	[CellGroup.name]: CellGroup,
	[Uploader.name]: Uploader,
},
  data() {
    return {
	  show:false,
	  contenttext:'',
	  fileList: [],
	  data:'',
	  wUrl: ''
   };
 },
methods: {
  afterRead({ file }) {
	const content = new FormData();
    //上传图片需要转换二进制这里要用到FormData

	content.append("file", file);
    //"file"是后端接口需要传的属性的名字

	up_photo(content).then((url) => {
	  this.fileList[this.fileList.length - 1].url = url;
	  this.wUrl = this.fileList[this.fileList.length - 1].url
	});
    //up_photo是封装好的请求方法，调用的是上传文件的接口
	},
	onOversize(file) {
	  console.log(file);
	  Toast('文件大小不能超过 500kb');
  },
  w_btn(){
	present({
	  text: this.contenttext,
	  code: this.wUrl
	}).then((res) => {
	  this.show = false
	  Toast.success('提交成功');
	});
	//present也是封装好的请求方法，调用的是提交信息的接口

  },
},
}

 不封装可以使用axios请求

//axios请求方法
axios.post('接口地址',{
  text: this.contenttext,
  code: this.wUrl
 }).then((res) => {
   this.show = false
   Toast.success('提交成功');
 });

 

CSS部分

<style lang="less" scoped>
.box{
  margin-top: 0.2rem;
	.btn{
		border-radius: 8px;
		width: 100%;
		margin-top: 0.1rem;
		border: none;
		padding: 0.1rem;
	}
	.box_btn{
		background: #FF5252;
	}
	.box-content{
		padding: 0.15rem;
		background: rgba(255, 255, 255, 1);
		color: #000000;
		text-align: center;
		width: 3.3rem;
		.title{
			text-align: center;
			line-height: 0.3rem;
			font-size: 0.16rem;
		}
		.van-form{
			:deep(input){
				border: 1px solid rgba(204, 204, 204, 1);
				padding: 0.03rem 0.1rem;
			}
		}
		.uploader{
			width: 90%;
			margin: 0 auto;
			border: 1px solid #cccccc;
			padding: 1rem 0rem;
		}     
		.submit_btn{
			width: 90%;
			display: flex;
			margin: 0.1rem auto;
			button:first-child{
				background: rgba(238, 238, 238, 1);
				border-radius: 4px;
				color: #000000;
				border:none;
			}
			button:last-child{
				margin-left: 0.1rem;
				background: green;
				border-radius: 4px;
				border:none;
			}
		}
	}
}

</style>