vue-Vant组件上传图片

<van-uploader v-model="fileList" multiple :max-count="1" class = "image"  :after-read="afterRead" :max-size="20 * 1024 * 1024"enctype="multipart/form-data"/><br /><van-button type="info" size="normal" @click.prevent="submitimage" native-type="button" class="img">上传图片</van-button>

@click.prevent
在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将native-type设置为button，否则会触发表单提交。

 afterRead (file) {// 此时可以自行将文件上传至服务器console.log(file.file)// const result = await uploadimage(file.file)// console.log(result)// var url = null// blob二进制流// const URL = window.URL || window.webkitURL// url = URL.createObjectURL(file.file)// console.log(typeof url)// console.log(url.slice(5))// const resulturl = url.slice(5)// console.log(resulturl)// this.file = resulturl// this.files = file// 在这块创建FormData对象// FormData 对象的使用：// 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString// 2. 异步上传二进制文件。// 上传图片需要转换二进制这里要用到FormDataconst forms = new FormData()// 这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性forms.append('file', file.file) // 获取上传图片信息this.files = filereturn file// const result = uploadimage(forms)// console.log(result)// const uploadimage = file => requests({//   method: 'post',//   url: '/uploadTest',//   file,//   headers: { 'Content-Type': 'multipart/form-data' }// })// const result = await requests.post('/uploadTest', file, { headers: { 'Content-Type': 'multipart/form-data' } })// console.log(result)},async submitimage () {// 提交上传图片的数据console.log('发送数据')console.log(this.files)const { fileList } = thisconst testimgurl = { fileList }// console.log(testimgurl)console.log(testimgurl.fileList[0])if (testimgurl.fileList[0] === undefined) {Toast.fail('请上传图片')return 'error'}// console.log('未上传图片的信息')// if (this.files.File !== undefined) {//   alert('上传图片成功')// } else {//   alert('请重新上传图片')// }// 在这块创建FormData对象// FormData 对象的使用：// 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString// 2. 异步上传二进制文件。// 上传图片需要转换二进制这里要用到FormDataconst forms = new FormData()// 这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性forms.append('file', this.files.file) // 获取上传图片信息const result = await uploadimage(forms)console.log(result)if (result.status === 200) {console.log('上传图片成功')} else {alert('上传图片失败')}},

限制图片的大小

if (testimgurl.fileList[0] === undefined) {console.log('未储存图片')} else {var size = testimgurl.fileList[0].file.sizeconsole.log(size)if (size > (5 * 1024 * 1024)) {Toast.fail('文件大小不能超过 5M')// console.log('图片太大，请重新选择')return 'error'}}

vue-Vant组件上传图片相关推荐

关于我使用vant组件的踩坑日记
啦啦啦~~~又是晴朗的一天~今天用vue+vant组件写h5移动端项目需要使用的到一个Actionsheet 弹窗,就是想实现一个这shai的效果: 当我悠哉悠哉的翻阅文档,哎~找到了我想要的然后我 ...
Vant 组件库（VUE）的使用 Vant滚动选择器选择器传值
在 vue- cli 项目中安装官方文档链接 npm ( 后面内容需要在控制台终端输入) # 通过 npm 安装 npm i vant -S 自动按需引入组件:babel-plugin-impor ...
vant组件搜索并选择_Vue.js自定义弹层组件|vue仿微信/ios弹窗
最近趁着国庆假期给自己充充电,一直在捣鼓Nuxt.js项目,由于项目中需要用到定制化弹窗功能,本来是想着使用Vant组件库,经过再三考虑,最后决定还是自己重新造一个,于是就有了Vue自定义弹出层VPo ...
vant引入组件报错_强烈推荐优秀的Vue UI组件库
在我们实际开发中常常因为项目周期短不得不引入一些UI框架来辅助开发那常见的比较好的UI框架有那些呢(基于VUE) Element UI组件库 (pc端) Element,一套为开发者.设计师和产品经 ...
vant部署_详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件单元测试覆盖率超过 90% 完善的中英文文档和示 ...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
No8.网易云音乐案例知识点自测知道reset.css和flexible.js的作用. 什么是组件库-例如bootstrap的作用. yarn命令的使用. 组件名字用name属性方式注册. 如何自 ...
【Vue知识点- No7.】路由、vant组件库的使用
No7.路由.vant组件库的使用学习目标 1.能够了解单页面应用概念和优缺点 2.能够掌握vue-router路由系统使用 3.能够掌握链接导航和编程式导航用法 4.能够掌握路由嵌套和路由守卫 5 ...
html5地区级联选择,【JS】vue+vant移动端地区级联选择组件
首页专栏 javascript 文章详情 0 vue+vant移动端地区级联选择组件 quanta发布于今天 08:25 写在开头:项目的框架是vue+vant,业务需求一个级联的地区选择,写完才 ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...

vue-Vant组件上传图片

vue-Vant组件上传图片

限制图片的大小

vue-Vant组件上传图片相关推荐

最新文章

热门文章