技术标签: 微信小程序 前端 vue.js 小程序 uni-app
在我们开发小程序的时候,不能避免要使用到小程序上传图片的API chooseImage 、uploadFile 方法
首先再我们程序文件utils 中 创建一个upImages.js 文件,废话也不不多说 直接上代码:
选择图片方法的封装:
chooseImage(size){
return new Promise((resolve,reject) => {
uni.chooseImage({
count: size, // 默认9
sizeType: ['original', 'compressed'],
sourceType: ['album','camera'],//['album','camera'],
mediaType: ['image'],//['image', 'video'],
success: function (res) {
const tempFiles = res.tempFiles //包含图片大小的数组
let answer = tempFiles.every(item => { //限制上传图片大小为
return item.size <= 2*1024*1024
})
if (!answer) {
toast('上传图片不能大于2M!')
return
}
resolve(res)
},
fail:function(err){
hideLoading()
reject("选择文件失败",err)
}
})
})
},
count :默认9张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType:['album','camera'], // 可以指定来源是相册还是相机,默认二者都有
mediaType:['image', 'video'], // 可以指定是图片视频,默认二者都有
上传图片方法的封装:
uploadFile(file){
return new Promise((resolve, reject) => {
uni.uploadFile({
header: {
'zrjkAppcode': getApp().globalData.zrjkAppCode
},
url: `${getApp().globalData.baseUrl}/api/multiUpload`,
filePath: file,
name: 'file',
formData: {
'token': storage.get('userInfo').token
},
success: function (res) {
var data = res.data;
resolve(JSON.parse(data))
},
fail: function (err) {
hideLoading()
reject(err)
},
})
})
},
header 中的信息是根据自己需要来设置,也可以选默认的
getApp().globalData.baseUrl 是你上传图片的请求路劲
formData 可传可不传 我这里传的是token 根据后台程序员决定的
最后就是我需要再功能处调用的方法封装:
async uploadPic(size=1){
let chooseImageResult = await this.chooseImage(size)
let imgArr = await chooseImageResult.tempFilePaths.map(async (item) => {
let uploadFileResult = await this.uploadFile(item)
return uploadFileResult.data;
})
return new Promise((resolve,reject) => {
Promise.all(imgArr).then((result)=>{
toast('上传成功')
resolve(result)
}).catch(err => {
hideLoading()
reject(err)
})
})
},
size 是我们需要上传图片的张数 最大为9张
最后就是我们再页面中的使用: 首先要引入我们的js文件
import { upLoad } from '../../utils/upImages.js' 根据你文件路径自己修改
完整的代码:
import { toast, hideLoading } from "./util.js"
import storage from './storage.js'
export const upLoad = {
// 上传图片 返回一个图片的数组
async uploadPic(size = 1){
let chooseImageResult = await this.chooseImage(size)
let imgArr = await chooseImageResult.tempFilePaths.map(async (item) => {
let uploadFileResult = await this.uploadFile(item)
return uploadFileResult.data;
})
return new Promise((resolve,reject) => {
Promise.all(imgArr).then((result)=>{
toast('上传成功')
resolve(result)
}).catch(err => {
hideLoading()
reject(err)
})
})
},
uploadFile(file){
return new Promise((resolve, reject) => {
uni.uploadFile({
header: {
'zrjkAppcode': getApp().globalData.zrjkAppCode
},
url: `${getApp().globalData.baseUrl}/api/multiUpload`,
filePath: file,
name: 'file',
formData: {
'token': storage.get('userInfo').token
},
success: function (res) {
var data = res.data;
resolve(JSON.parse(data))
},
fail: function (err) {
hideLoading()
reject(err)
},
})
})
},
chooseImage(size){
return new Promise((resolve,reject) => {
uni.chooseImage({
count: size, // 默认9
sizeType: ['original', 'compressed'],//['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'],//['album','camera'], // 可以指定来源是相册还是相机,默认二者都有
mediaType: ['image'],//['image', 'video'], // 可以指定是图片视频,默认二者都有
success: function (res) {
const tempFiles = res.tempFiles //包含图片大小的数组
let answer = tempFiles.every(item => { //限制上传图片大小为,
return item.size <= 2*1024*1024
})
if (!answer) {
toast('上传图片不能大于2M!')
return
}
resolve(res)
},
fail:function(err){
hideLoading()
reject("选择文件失败",err)
}
})
})
},
}
toast: 这是封装的 uni.showToast
hideLoading : 这是封装的 uni.hideLoading
showLoading: 这是封装的uni.showLoading
微信小程序的上传图片方法基本一样,如有需要,自行修改一下
在最后,如有小伙伴想学习了解更多前端知识,可以关注我的公众号 codefuzi 一起成长
文章浏览阅读1w次,点赞2次,收藏27次。来源:机器人小妹 很多时候企业拥有重复,乏味且困难的工作流程,这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本,企业别无选择,只能自动化某些功能以降低生产成本。 通过数字化..._人工智能平台
文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面,而不必每次去手动操作重新运行,这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便,但是不是每个 electron 项目必须的,所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader,国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader
文章浏览阅读942次。在11.0 进行定制化开发,会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单
文章浏览阅读3.7k次。https://www.yuque.com/mnn/cn/cvrt_linux_mac基础依赖这些依赖是无关编译选项的基础编译依赖• cmake(3.10 以上)• protobuf (3.0 以上)• 指protobuf库以及protobuf编译器。版本号使用 protoc --version 打印出来。• 在某些Linux发行版上这两个包是分开发布的,需要手动安装• Ubuntu需要分别安装 libprotobuf-dev 以及 protobuf-compiler 两个包•..._mnn 编译linux
文章浏览阅读1.8k次。CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态效果,由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画,名称为fadeIn@-webkit-keyf_css3入场效果淡入淡出
文章浏览阅读2.8k次。计算机系统应包括硬件和软件两个子系统,硬件和软件又必须依次分别包括中央处理器和系统软件。按人的要求接收和存储信息,自动进行数据处理和计算,并输出结果信息的机器系统。计算机是脑力的延伸和扩充,是近代科学的重大成就之一。计算机系统由硬件(子)系统和软件(子)系统组成。前者是借助电、磁、光、机械等原理构成的各种物理部件的有机组合,是系统赖以工作的实体。后者是各种程序和文件,用于指挥全系统按指定的要求进行..._计算机系统包括硬件系统和软件系统 软件又必须包括
文章浏览阅读7.9k次,点赞3次,收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面,即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单,只需把一个进程已调入内存的页面,按先后次序链接成一个队列,并设置一个指针,称为替换指针,使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应,因为在进程中,有些页面经常被访问,比如,含有全局变量、常用函数、例程等的页面,FIFO 算法并不能保证这些页面不被淘汰。这里,我_进程调度fifo算法代码
文章浏览阅读133次。rownum是oracle才有的写法,rownum在oracle中可以用于取第一条数据,或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok,上面是mysql和oracle取第一条数据的写法对比,不过..._mysql 替换@rownum的写法
文章浏览阅读790次,点赞3次,收藏4次。官网下载下载链接:http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个,看自己需要(我选择企业级应用,如果只是单纯学习java选第一个就行)进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的(点后面的文件夹进去),但是我们没有11版本的,所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm
文章浏览阅读245次。原文链接:https://linux.cn/article-7801-1.htmlifconfigping <IP地址>:发送ICMP echo消息到某个主机traceroute <IP地址>:用于跟踪IP包的路由路由:netstat -r: 打印路由表route add :添加静态路由路径routed:控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan
文章浏览阅读224次。reduxredux里要求把数据都放在公共的存储区域叫store里面,组件中尽量少放数据,假如绿色的组件要给很多灰色的组件传值,绿色的组件只需要改变store里面对应的数据就行了,接着灰色的组件会自动感知到store里的数据发生了改变,store只要有变化,灰色的组件就会自动从store里重新取数据,这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存..._redux redis
文章浏览阅读2.2k次,点赞3次,收藏6次。unzip版本不支持4G以上的压缩包所以要使用p7zip:Linux一个高压缩率软件wget http://sourceforge.net/projects/p7zip/files/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make && make install 如果安装失败,看一下报错是不是因为没有下载gcc 和 gcc ++(p7_linux 7za解压中文乱码