热门标签 | 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 上传图片需要注意的事项


推荐阅读
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • http:my.oschina.netleejun2005blog136820刚看到群里又有同学在说HTTP协议下的Get请求参数长度是有大小限制的,最大不能超过XX ... [详细]
  • 本文介绍了作者在开发过程中遇到的问题,即播放框架内容安全策略设置不起作用的错误。作者通过使用编译时依赖注入的方式解决了这个问题,并分享了解决方案。文章详细描述了问题的出现情况、错误输出内容以及解决方案的具体步骤。如果你也遇到了类似的问题,本文可能对你有一定的参考价值。 ... [详细]
  • 在重复造轮子的情况下用ProxyServlet反向代理来减少工作量
    像不少公司内部不同团队都会自己研发自己工具产品,当各个产品逐渐成熟,到达了一定的发展瓶颈,同时每个产品都有着自己的入口,用户 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • WebSocket与Socket.io的理解
    WebSocketprotocol是HTML5一种新的协议。它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,属于服务器推送 ... [详细]
  • Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ... [详细]
  • 本文记录了在vue cli 3.x中移除console的一些采坑经验,通过使用uglifyjs-webpack-plugin插件,在vue.config.js中进行相关配置,包括设置minimizer、UglifyJsPlugin和compress等参数,最终成功移除了console。同时,还包括了一些可能出现的报错情况和解决方法。 ... [详细]
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • uniapp开发H5解决跨域问题的两种代理方法
    本文介绍了uniapp开发H5解决跨域问题的两种代理方法,分别是在manifest.json文件和vue.config.js文件中设置代理。通过设置代理根域名和配置路径别名,可以实现H5页面的跨域访问。同时还介绍了如何开启内网穿透,让外网的人可以访问到本地调试的H5页面。 ... [详细]
  • HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • 怎么在PHP项目中实现一个HTTP断点续传功能发布时间:2021-01-1916:26:06来源:亿速云阅读:96作者:Le ... [详细]
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社区 版权所有