vant中自定义文件上传+js自定义上传(点击区域上传并预览)

首先是普通的vant文件上传

<van-uploader multiple v-model="fileList" accept=image/jpeg :max-count="1" :after-read="afterRead" ref="selectfile" /> data(){ return{ filelist:[], } } methods: { // 用表单提交 afterRead(file) { //文件读取完成后的回调函数 let content = file.file; //创建一个新的FormData let formData = new FormData(); // upload这个名字是后台给的 formData.append("upload", content); //获取formdata表单所有的数据 console.log(formData.getAll("")); // axios // .post( //服务器上传地址 // `http://xxxxxxxxxxxx`, //服务器需要的数据，此处是formdata表单 // formData,（名字是后台参数确定的） //如果默认请求头是json，需要改一下请求头数据格式 // { // "Content-Type": "multipart/form-data" // } // ) // .then(res => { // console.log(res); // console.log(res.config.headers); // }); axios({ method: "post", //服务器上传地址 url: `http://xxxxxxxxxxxxxxxxxxxxxxxxxxx`, data: formData,//（名字是后台接口参数确定的） headers: { // 修改请求头 "Content-Type": "multipart/form-data" } }).then(res => { console.log(res); console.log(res.config.headers); }); } }

划重点(⊙_⊙)—耗费了我几个小时才搞出来的点击整个区域就可以上传的代码, (*๓´╰╯`๓)

自定义文件上传

点击整个红色区域触发启动本地文件夹 选中图片之后，依然在对应区域预览

HTML代码 使用vant ， (｀・ω・´)

<li @change="changeImage($event)"> <van-uploader multiple :accept="'image/*'" :preview-size="30" :deletable="false" :after-read="afterRead" > <span>修改头像</span> <img :src="avatar" class="img-avatar" /> <van-icon name="arrow" /> </van-uploader> </li> **js代码** data() { return {avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',} } methods: { changeImage(e) { const file = e.target.files[0]; const reader = new FileReader(); const that = this; reader.readAsDataURL(file); reader.onload = function () { that.avatar = this.result; }; }, }

**不使用vant ， (～￣▽￣)～ ** 1.html代码 っﾟДﾟ)っ

<div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id="uppic" accept="image/gif,image/jpeg,image/jpg,image/png" @change="changeImage($event)" ref="avatarInput" class="uppic"> </div>

2.js代码 (ㅍ_ㅍ)

data() { return { avatar: require('../assets/jia.jpg'), } },

3.实现函数 O(∩_∩)O

changeImage(e) { var file = e.target.files[0] var reader = new FileReader() var that = this reader.readAsDataURL(file) reader.onload = function(e) { that.avatar = this.result } },

(ง •_•)ง