Vant Uploader 文件上传

Uploader 文件上传

使用 VantUI 的 Uploader 组件进行文件上传

封装一个 upLoaderImg.js 公共方法

//upLoaderImg.js
import axios from 'axios'		//引入axios
import { Toast } from 'vant'	//引入Toast

function upLoaderImg (file) {	//file为 你读取成功的回调文件信息
	//new 一个FormData格式的参数
	let params = new FormData()
	params.append('file', file)
	let config = {
        headers: { //添加请求头
          	'Content-Type': 'multipart/form-data'
        }
  	}
	return new Promise((resolve, reject) => {
		//把 uploadUrl 换成自己的 上传路径
		axios.post('uploadUrl', params, config).then(res => {
	        if (res && res.data && res.data.status === 1) {				//如果为真 resolve出去
	        	resolve(res.data)
	        } else {
	        	//否则 Toast 提示
	        	Toast.fail(res.data && (res.data.msg))
	        	reject(res.data)
	        }
        }).catch(err => {
          	Toast.fail('系统异常')
          	reject(err)
    	});
	})
}
export default upLoaderImg

使用

<van-uploader
	:after-read="afterRead"
	:before-read="beforeRead"
  	v-model="fileList"
  	multiple
  	:max-count="1"
/>

beforeRead (file) {	//上传之前校验
	if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
		Toast('只允许上传jpg/png格式的图片！')
		return false
	}
	return true
},
async afterRead (file) {	//文件读取完成后的回调函数
	let uploadImg = await upLoaderImg(file.file)//使用上传的方法。file.file
	console.log(uploadImg)
}