热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue+vant上传图片需要注意的事项

原标题:vue+vant上传图片需要注意的事项<van-uploaderv-model=

原标题:vue+vant 上传图片需要注意的事项

"fileList" multiple :after-read="afterRead" :max-count="1" />

1:上传文件流,提交的模式 肯定得 form-data模式

2:上传的文件file 做出处理我这里做的只能选择一张

afterRead(file){
console.log(file);
//控制台可以看见图片信息
if(this.fileList.length > 1){
文章来源地址27721.html
this.fileList.splice(1);
this.$msg({
text:
'只能选择这么多!',
type:
'info'
})
return false;
}
let Files
= this.Files;
Files.push(file.file);
},

3:vue 里面axios 拦截处理 因为上传模式必须是from-data 所以就要设置 config.headers['Content-Type'] = 'multipart/form-data';



//httprequest拦截器

axios.interceptors.request.use((config)=>{

if(config.method==='post'){

if(config.data&&!config.data.i){

config.headers['Content-Type']='multipart/form-data';

}else{

config.data=Qs.stringify(config.data);

}

//if(config.data){

//if(config.data.i===undefined){

//config.headers['Content-Type']='multipart/form-data';

//}else{

//configwww.yii666.com.data=Qs.stringify(config.data);


//}

//}

}

returnconfig;

},(error)=>{

returnPromise.reject(error);

})


3:就是上次图片前端做的处理需要用到 new FormData()做出处理,因为是文件流,直接打印是看不出来的详情去看官网new FormData()。

WineOrder(){
console.log(
this.Files)
this.disabled = true;
www.yii666.com
const data = new FormData();
const USER = JSON.parse(sessionStorage.getItem('USER'));
data.append(
'i',USER.uniacid);
data.append(
'token',USER.token);
data.append(
'bid',USER.bid);
data.append(
'roomid',this.roomid);
data.append(
'booker',this.dingName);
data.append(
'guestname',this.userName);
data.append(
'type',this.type);
data.append(
'tel',this.phone);
da文章来源站点https://www.yii666.com/ta.append(
'endtime',this.date);
data.append(
'file',this.Files[0]);
data.append(
'goodsinfo',JSON.stringify(this.savewineList));
WineOrder(data).then((e)
=>{
if( e.code == 0 ){
this.disabled = false;
e.totalmoney
= '';
var c ={
Topic:
"",
data:e,
type:
'Savewine'
}
return;
setTimeout(()
=> {
window.location.href
="setterOrder?c="+JSON.stringify(c);
},
1500);
}
else{
this.disabled = false;
this.$msg({
text:e.msg,
type:
'info'
})
}
})
},

文章来源地址27721.html

效果图

剩下的就交给后端处理就行了,到这里就完全可以了

来源于:vue+vant 上传图片需要注意的事项


推荐阅读
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 阿里云 Aliplayer高级功能介绍(八):安全播放
    如何保障视频内容的安全,不被盗链、非法下载和传播,阿里云视频点播已经有一套完善的机 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 本文介绍了如何使用Postman构建和发送HTTP请求,包括四个主要部分:方法(Method)、URL、头部(Headers)和主体(Body)。特别强调了Body部分的重要性,并详细说明了不同类型的请求体。 ... [详细]
  • iOS snow animation
    CTSnowAnimationView.hCTMyCtripCreatedbyalexon1614.Copyright©2016年ctrip.Allrightsreserved.# ... [详细]
  • 本文介绍了如何使用Python爬取妙笔阁小说网仙侠系列中所有小说的信息,并将其保存为TXT和CSV格式。主要内容包括如何构造请求头以避免被网站封禁,以及如何利用XPath解析HTML并提取所需信息。 ... [详细]
  • 小程序的授权和登陆
    小程序的授权和登陆 ... [详细]
  • 为什么多数程序员难以成为架构师?
    探讨80%的程序员为何难以晋升为架构师,涉及技术深度、经验积累和综合能力等方面。本文将详细解析Tomcat的配置和服务组件,帮助读者理解其内部机制。 ... [详细]
  • Bootstrap 插件使用指南
    本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ... [详细]
  • packagecom.panchan.tsmese.utils;importjava.lang.reflect.ParameterizedType;importjava.lang. ... [详细]
  • 如何配置VisualSVN以确保提交时必须填写日志信息
    在软件开发团队中,成员们有时会忘记在提交代码时添加必要的备注信息。为了规范这一流程,可以通过配置VisualSVN来强制要求团队成员在提交文件时填写日志信息。本文将详细介绍如何设置这一功能。 ... [详细]
  • 本文介绍了 Go 语言中的高性能、可扩展、轻量级 Web 框架 Echo。Echo 框架简单易用,仅需几行代码即可启动一个高性能 HTTP 服务。 ... [详细]
  • 本文将介绍如何在混合开发(Hybrid)应用中实现Native与HTML5的交互,包括基本概念、学习目标以及具体的实现步骤。 ... [详细]
  • HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送www方式的数据。HTTP协议采用了请求响应模型。客服端向服务器发送一 ... [详细]
  • Spring Boot 中配置全局文件上传路径并实现文件上传功能
    本文介绍如何在 Spring Boot 项目中配置全局文件上传路径,并通过读取配置项实现文件上传功能。通过这种方式,可以更好地管理和维护文件路径。 ... [详细]
author-avatar
唯心-C_436
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有