vue基于vant的uploader上传图片

小白第一次使用有赞的vant组件库, 这里记录一下个人在项目上的一些使用, 方便以后查阅.


<ul class="shop-list">
  <li class="list-item" v-for="(item, index) in shopList.items" :key="index">
    <div class="item-top-t">
      <div class="item-info" :order_code="item.order_code">
        <img class="item-img" :src="item.sku_pic_url" alt />
        <div class="item-t">
          <p class="item-title">{{item.goods_title}}</p>
          <p class="item-specs">{{item.sku_param_value}}</p>
        </div>
      </div>
      <div class="star">
        <span class="joyful">愉悦值:</span>
        <van-rate v-model="item.rate_num" :size="18" color="#f44" void-icon="star" void-color="#eee" />
      </div>
    </div>
    <div class="comment-main">
      <textarea v-model="item.comment" rows="3" cols="20" class="comment" type="text"
        placeholder="商品评价"  @blur="initScroll(index, $event)"></textarea>
    </div>
    <div class="upload">
      <van-uploader :name="index" :before-delete="delImgs" :after-read="uploadImgs"
        v-model="item.fileList" :max-count="5">
        <div class="upload-main">
          <img class="upload-img" src="@/assets/images/mihepink/w7.png" alt="">
          <p
          >上传图片</p>
        </div>
      </van-uploader>
    </div>
  </li>
</ul>

因为是一个商城项目, 所以DOM结构稍微有点多, li代表每个商品, 因为一个订单里不可能只有一个商品, 所以这里使用循环。
这里主要介绍一下van-uploader上面的属性和方法:
name:标识符,可以在回调函数的第二项参数中获取;
before-delete:文件删除前的回调函数;
after-read:文件读取完成后的回调函数;
v-model:绑定已经上传的图片列表,并展示图片列表的预览图;
max-count:文件上传数量限制;
这里是项目中使用到的一些属性,官网上会有更加详细的介绍:https://youzan.github.io/vant/#/zh-CN/uploader


/*上传图片*/
uploadImgs(file, name) {
  let data = new FormData();    
  let sub = name.name;  //标识, 使用的商品的索引
  //file是当前file对象, 此对象包含file和content
  data.append("picture", file.file);    
  this.$http
    .post(
      `URL`,
      data,
      {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }
    )
    .then(res => {
      if (res.data.statusCode == 200) {
      /*因为是评价功能, 还需要把图片传到后台, 这里先存一下*/
        this.shopList.items[sub].uploadImgs.push(res.data.picture);
      }
    });
},

/*点击删除图片*/
delImgs(file, name) {
    //标识, 使用的商品的索引
  let sub = name.name; 
  //uploadImgs是要传递给后台的图片数组
  //name.index代表图片的索引
  this.shopList.items[sub].uploadImgs.splice(name.index, 1);
  //fileList是展示预览的图片数组
  this.shopList.items[sub].fileList.splice(name.index, 1);
},

以上就是本人项目中使用到的上传图片, 如果有哪些不足或错误, 欢迎留言评论。

Image placeholder
xuetiedan
未设置
  70人点赞

没有讨论,发表一下自己的看法吧

推荐文章
基于vue移动端UI框架有哪些?

vuxVUX(读音[v’ju:z],同views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。文档地址:https://doc.vux.li/zh-CN/演示地址:ht

有vue基础学react难吗?

React是一个用于前端开发的开源JavaScript库,由Facebook开发。其基于组件的库使您可以为Web应用程序构建高质量的用户界面。vue.js是一个构建用户界面的渐进式框架。采用自底向上增

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言在企业应用的快速开发中,我们需要尽快的完成一些功能。如果您使用了AntDesignVue,在进行表单的文件上传相关功能开发的时候,您肯定迫不及待地需要找到一篇包治百病的文章,正是如此,才有了该文的

基于jquery开发的UI框架有哪些?

基于jquery开发的UI框架有哪些?1、国产jQueryUI框架(jUI)DWZDWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

jquery的url参数乱码怎么解决?

URL地址栏传递字符(中文、=、&)乱码解决办法1、使用encodeURI()方法encodeURI()方法可把字符串作为URI进行编码,转码之后就不会乱码,同时如果传递参数中包含&、=等特殊字符转码

vue和react的区别是什么?

vue和react的区别1、监听数据变化的实现原理不同Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用的方式(diff)进行的,如果不优化可能导

vue和react的主要区别是什么?

Vue是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计,其核心库只关注视图层,并且非常容易学习,也易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用

基于ApiBoot的前后分离演示脚手架诞生了~

知识改变命运,撸码使我快乐,2020继续游走在开源界点赞再看,养成习惯给我来个Star吧,ApiBootAdmin源码仓库:https://gitee.com/minbox-projects/api-

从 simplemde 写入 + inline-attachment 图片拖拽上传 到 parsedown 解析

###准备工作安装富文本编辑器sparksuite/simplemde-markdown-editor yarnaddsimplemde--save 安装markedjs/marked,在JS中解析

webpack中css的url报错?

webpack中css的url报错?css-loader://打包样式中背景图 { test:/\.(png|jpg)$/, loader:"url-loader?limit=8192&name=im

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

美团BERT的探索和实践

他山之石,可以攻玉。美团点评NLP团队一直紧跟业界前沿技术,开展了基于美团点评业务数据的预训练研究工作,训练了更适配美团点评业务场景的MT-BERT模型,通过微调将MT-BERT落地到多个业务场景中,

学习IT的实用工具和网站推荐

对于一些学习IT的初学者来说,掌握一些实用的软件工具和学习网站是十分有必要的。本文要为大家推荐一些学习IT的相关的资源,像是鸠摩搜书和脚本之家等电子书搜索网站,还有冰点文库和文件搜索工具等实用工具以及

程序员:我终于知道post和get的区别

IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。此话一出,不知激起了多少(码

Fortinet的云安全观:上云≠安全 云安全市场或迎“又一春”!

近年来网络攻击事件频繁发生,企业对于网络安全的关注度已经到达前所未有的高度,如何保证业务的正常运转是每个企业最为关注的问题之一。而随着越来越多的企业将业务扩展到云端,云上安全问题也成为企业必谈的话题!

从reddit的一亿美元商业逆袭,看移动与PC产品的时代天堑

提起有“互联网头版”之称的reddit,你会联想到什么?想到这一网站上层出不穷的搞笑梗或meme图?还是程序员们经常制造出的各种有趣小发明?说起来在这个体量巨大、包容性极强、时刻制造着互联网新热点的论

从ResNet的诞生讲起:美公司在北京的AI研究所出了成果,中美究竟谁受益更多?

大数据文摘出品来源:macropolo编译:狗小白、Aileen中美之间摩擦不断,如今,AI竞争也成为了其中重要的组成部分。让我们假设这样一个场景:美国AI公司设立在中国的实验室取得了一些突破,谁从中

为什么说IPA智能流程自动化是企业IT的下一波浪潮?

提到IPA,可能很多人会立刻想到RPA。RPA,即机器人流程自动化,是企业IT过去两年最热门的技术之一。仅在2018年,就有三家公司拿到了总额超过十亿美金的风投,包括AnywhereAutomatio

30分钟让你掌握Git的黑魔法

本文转载自云效公众号在GitRevNews#48期的LightReading中有一篇文章写的不错,不仅干货满满而且还附带了操作视频。其中的内容不仅覆盖了很多git使用上的基础知识,也从使用角度上解答了

tomcat的重启

点击下方截图可插入当前视频播放画面,了解更多Mackdown语法可以点击上方?图标jsp运行不需要重启tomcat而servlet需要

如何改变react的行内样式

如何改变react的行内样式在react中,可以这样来设置行内样式:render(){ conststyles={color:"red",fontSize:"16px"}; return( ); }

{