mpvue小程序项目中的图片上传

我的csdn博客地址:https://blog.csdn.net/zmkyf1993

一般我是优先更新csdn内容,然后在拷过来的。

效果图

通过mpvue文档得知他使用的是小程序原生api中的图片选择(wx.chooseImage)和文件上传(wx.uploadFile),因此我们直接根据小程序的文档来使用就可以了。

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

图片选择

我将备注写在代码块里,比较好说

chooseImage(e) {
let i = 0; // 多图上传时使用到的index
let that = this;
let max = that.maxImg; //最大选择数
let upLength; //图片数组长度
let imgFilePaths; //图片的本地临时文件路径列表
wx.chooseImage({
count: max || 1, //一次最多可以选择的图片张数
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
let len = that.files.concat(res.tempFilePaths);
imgFilePaths = res.tempFilePaths;
upLength = imgFilePaths.length;
if(len.length > max){
that.$mptoast('图片最多只能选择' + max);
return false;
}
/**
* 上传完成后把文件上传到服务器
*/
wx.showLoading({
title: '上传中...',
})
that.upLoad(imgFilePaths,i,upLength); //上传操作
},
fail: function () {
console.log('fail');
},
complete: function () {
console.log('commplete');
}
})
}

上传操作

微信的上传api

https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html

他这文档有个地方没说明,那就是一次只能上传一个文件,当前一个文件上传成功的时候才能接着下一个上传。所以我们多图上传的话需要分次上传,然后在上传结束后再次调用上传方法。
因此我在接口调用结束的回调函数,complete中判断是否全部上传结束,全部结束就取消loading,还未结束就再次调用上传方法上传下一个文件。

upLoad(imgPath,i,upLength){
let that = this;
//上传文件
wx.uploadFile({
url: '上传接口',
filePath: imgPath[i],
name: 'img0',
header: {
"Content-Type": "multipart/form-data"
},
success: function (res) {
console.log('上传成功' + i);
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
that.files = that.files.concat(imgPath[i]); //合并图片显示数组
let imgData = JSON.parse(res.data);
that.upImg.push(imgData.data);
console.log(that.upImg);
},
fail: function (res) {
console.log(res);
wx.hideLoading();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
},
complete: function(){
i++;
if(i == upLength){
wx.hideLoading(); //上传结束,隐藏loading
}else{
that.upLoad(imgPath,i,upLength);
}
}
});
},
图片预览功能

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

使用效果,点击图片可以选择预览或者删除

previewImage(e,index) {
let that = this;
wx.showActionSheet({
itemList:["预览","删除"],
success: function(res) {
if(res.tapIndex === 0){
//选择预览
wx.previewImage({
current: e.currentTarget.id, // 当前显示图片的http链接
urls: that.files // 需要预览的图片http链接列表
})
} else {
//选择删除
that.files.splice(index,1); //删除本地图片地址数组中位置内容
that.upImg.splice(index,1); //删除提交给后台的图片数组中的位置内容
}
},
})
},

流程就是这样,最后补上页面代码
mptoast是一个mpvue的toast提示插件

<template>
<section id="pickUp">
<div class="upload">
<p class="pick-title">取件照片</p>
<div class="weui-uploader__bd">
<div class="weui-uploader__files" id="uploaderFiles">
<block v-for="(item,index) in files" :key="index">
<div class="weui-uploader__file" @click="previewImage($event,index)" :id="item">
<image class="weui-uploader__img" :src="item" mode="aspectFit" />
</div>
</block>
</div>
<div class="weui-uploader__input-box">
<div class="weui-uploader__input" @click="chooseImage"></div>
</div>
</div>
</div>
<p class="pay-num">下单数量(箱):{{num}}</p>
<div class="add-num">
<add-content :title="addTitle" v-model="getOrder.recieve"></add-content>
</div>
<div class="remark">
<textarea placeholder="填写备注" placeholder-style="color:#999999;font-size:30rpx;" class="remark-text" v-model="getOrder.remark"/>
</div>
<button
type="primary"
class="complete-btn"
@click="completeBtn"
>
完成取件
</button>
<mptoast />
</section>
</template>

mpvue图片上传的更多相关文章

  1. mpvue 图片上传预览组件封装

    <template> <div class="j-pic-upload"> <div class="j-upload-btn" @ ...

  2. Asp.Net Mvc 使用WebUploader 多图片上传

    来博客园有一个月了,哈哈.在这里学到了很多东西.今天也来试着分享一下学到的东西.希望能和大家做朋友共同进步. 最近由于项目需要上传多张图片,对于我这只菜鸟来说,以前上传图片都是直接拖得控件啊,而且还是 ...

  3. 06.LoT.UI 前后台通用框架分解系列之——浮夸的图片上传

    LOT.UI分解系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#lotui LoT.UI开源地址如下:https://github.com/du ...

  4. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  5. HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术

    最近做项目在前端我使用了很多新技术,这些技术有bootstrap.angularjs,不过最让我兴奋的还是使用了HTML5的技术,今天我想总结一些HTML5的技术,好记性不如烂笔头,写写文章可以很好的 ...

  6. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  7. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  8. TinyMCE的使用(包括汉化及本地图片上传功能)

    TinyMCE我就不多介绍了,这是下载地址:https://www.tinymce.com/download/ 下载下来是英文版,要汉化也很简单.首先去网上随便下载个汉化包,然后把汉化包解压后的lan ...

  9. 包含修改字体,图片上传等功能的文本输入框-Bootstrap

    通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键 可以拖拽插入图片,支持图片上传(也可以获取移动设 ...

随机推荐

  1. C# 取得对象属性类型

    1.对象 Object obj; 2.对象属性 Type postType = obj.GetType(); PropertyInfo[] postTypeInfos = postType.GetPr ...

  2. [Windows] - DNS防污染工具Pcap_DNSProxy

    最近试过非常多的DNS防污染工具(包括:dnsforwarder.dnsforwarder.dnscrypt-proxy.SimpleDNSCrypt等),感觉这个Pcap_DNSProxy简单.快捷 ...

  3. 2019 美柚java面试笔试题 (含面试题解析)

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.美柚等公司offer,岗位是Java后端开发,因为发展原因最终选择去了美柚,入职一年时间了,也成为了面试官,之 ...

  4. SpringMVC中@RequestParam注解作用

    1.不使用@RequestParam  请求参数名必须和形参名称一样 2.使用@RequestParam    请求参数名必须和@RequestParam value属性值一样    请求参数名不必和 ...

  5. 标记重要和强调的文本 strong & em

    strong元素表示内容的重要性,而em则表示内容的着重点. 根据内容需要,这两个元素既可以单独使用,也可以一起使用. 例如: ... <body> <p><strong ...

  6. BDOC ROUTER

    BAPI_CRM_SAVECRM_GENERIC_CRM_INMAP_BAPIMTCS_AND_PROCESSCRM_DOWNLOAD_MAP_TO_MBDOCCRM_SALESDOC_MAP_BAP ...

  7. Axios的简单用法

    一转眼Vue 3.0都要发布了,学习使用Vue也有一段时间了,记录一下axios的用法 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中,有点类似于aja ...

  8. 在线java堆栈分析工具

    1:工具地址  https://gceasy.io/ft-dashboard-web.jsp 2:在线分析结果       

  9. python中生成JWK(json web token)

    #需要安装pyjwt import jwt import time # 使用 sanic 作为restful api 框架 def create_token(request): grant_type ...

  10. 深入理解Java类加载器(一):Java类加载原理解析

    摘要: 每个开发人员对java.lang.ClassNotFoundExcetpion这个异常肯定都不陌生,这个异常背后涉及到的是Java技术体系中的类加载机制.本文简述了JVM三种预定义类加载器,即 ...