赞
踩
在我们开发小程序的时候,不能避免要使用到小程序上传图片的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 一起成长
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。