Vue使用vant上传图片给后台服务器

这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头雾水，不知道该如何去下手，所以就从网上找到了相关的资源，然后发现，上传图片需要用到FromData对象。而且也需要设置相应的响应头。具体代码如下：

这是vant所提供上传图片的组件

<van-uploaderv-model="fileList"multiple:max-count="1":after-read="afterRead"preview-size="200px"class="uploader"ref="file"/>

组件与data中的fileList动态绑定

data() {return {fileList: [],//默认是一个空数组imageData: {},isShow: false,showList: false,};},

这块是将文件读取后进行的回调

afterRead(file) {// 此时可以自行将文件上传至服务器console.log(file);//在这块创建FormData对象// FormData 对象的使用：// 1.用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString// 2. 异步上传二进制文件。//上传图片需要转换二进制这里要用到FormDataconst forms = new FormData();//这里的file表示给后台传的属性名字，这里看接口文档需要传的的属性forms.append("file", file.file); // 获取上传图片信息//向后端发送相应的请求//这块的url是具体的交互接口//headers是上传图片需要用到的响应头，此处的token是后端那边给设置的，所以我请求的时候需要带上token，//token根据实际情况自行添加axios.post(url, forms, {headers: {"content-type": "multipart/form-data",token: this.token,},}).then((res) => {//如果传入的响应状态码为200，则成功将文件发送给后台if (res.data.status === 200) {console.log(res);//this.imageData = res.data.showapi_res_body;//this.isShow = false;//this.showList = true;//Toast(res.data.showapi_res_body.remark);} else {//Toast(res.data.msg);//this.isShow = false;console.log(res.data.msg)//这块是请求失败后台给返回的相应的数据}});},

Vue+vant使用uploader上传图片相关推荐

vant中uploader上传图片
vant中uploader上传图片 1.html部分 <van-field name="uploader" label="上传图片"><van ...
vant上传图片转二进制_土旦：移动端 Vue+Vant 的Uploader 实现：上传、压缩、旋转图片-Go语言中文社区...
data() {return{ files: { name:"", type:""}, headerImage:null, picValue:null, upI ...
【土旦】使用Vant 的Uploader 上传图片重定义返回格式使用FormData格式提交
前言开发一个图片上传功能需求要用vant中的Uploader , 发现 Uploader组件官方封装返回的数据是加密的,不适合我这个项目(需要上传到本地ftp服务器), 看了一下官方 issue ...
小猿圈web前端之移动端Vue+Vant实现上传压缩旋转图片功能
小猿圈web前端讲师为了大家更好的学习前端知识决定每天分享一个web前端案例,希望对你与学习前端的你有所帮助,今天分享的是移动端Vue+Vant的Uploader实现上传.压缩.旋转图片等功能的详细介 ...
vue+vant图片上传压缩图片大小
vue+vant图片上传压缩图片大小可能在项目中大家都会遇到文件上传的需求,比如头像,图片等,但是太大的文件上传会给服务器造成很大大压力,那么我们就需要压缩上传的文件其实这儿所说的压缩,就是图片重 ...
使用WEUI uploader上传图片
使用WEUI uploader上传图片,博主费了很大的劲总算找到完整的了,并且带后台接收代码,有需要的朋友拿去吧,亲测可用! 一.html代码 <link rel="styleshee ...
Vue+Vant 基于DatetimePicker进行二次开发，实现yyyyMMdd hh:mm:ss时间选择
Vue+Vant 基于DatetimePicker进行二次开发,实现yyyyMMdd hh:mm:ss时间选择 1.效果图 2.前提 3.项目结构 4.index.vue 5.timeSelectio ...
vue vant优惠券使用
vue vant优惠券使用引入vant,并且复制代码过来,然后我把数据列表抽出去,放在vuex里面了. 1,vuex 2,页面 3,函数自带的函数,可以监听选中的是哪条数据,并且也就能拿到这条数据 ...
Capacitor+Vue+Vant移动端打包总结
Capacitor+Vue+Vant移动端打包总结本笔记为打包Vue移动端Android Apk 打包步骤 Capacitor与Vue项目结合基本配置自行百度/谷歌,这里是已集成配置好的项目. 1. ...

Vue+vant使用uploader上传图片

Vue使用vant上传图片给后台服务器

Vue+vant使用uploader上传图片相关推荐

最新文章

热门文章