云函数开发遇到的问题

在微信云开发环境当中,普通的用户并没有往云存储内写入文件的权限

所以普通用户想要使用wx.cloud.uploadFile显然是不现实的

但是我们同时也知道,云函数是后台服务端,具有管理员权限,只要能调用云函数上传文件就可以解决这个问题了

参照官方文档中云函数的写法

const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path') exports.main = async (event, context) => {
const fileStream = fs.createReadStream(path.join(__dirname, 'demo.jpg'))
return await cloud.uploadFile({
cloudPath: 'demo.jpg',
fileContent: fileStream,
})
}

官方文档写的云里雾里,并不是这么容易理解

_dirname代表的是文件根目录,官方文档能实现的功能貌似只是移动云存储空间中的文件,并不能操作本地文件

解决方案

只上传文件路径是不能把本地文件成功上传到云存储的,但是我们可以将本地文件进行 进制 编码 转化为字节流上传到云函数中,

再在云函数的操作中把字节或文件转化为相对应的格式

微信小程序文档为我们提供了一个很好的用于编码文件的功能函数

wx.getFileSystemManager()

利用这个函数,可以把图片编码成为base64 的形式上传到云函数

如果是多个图片上传,只需要遍历即可

wx.getFileSystemManager().readFile({
filePath: that.data.images[i], //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
wx.cloud.callFunction({
name:'file',
data:{
path: 'pictures/' + util.vcode(new Date())+index+'.png',
file: res.data
},
success(_res){ console.log(_res)
},fail(_res){
console.log(_res)
}
})
index++;
}
})

其中index的作用是对图片进行区分编码,有不同的名字,不然重名的文件上传,原文件会被覆盖

完整的js文件

import {
promisify
} from '../../utils/promise.util'
import {
$init,
$digest
} from '../../utils/common.util'
var util = require('../../utils/util.js')
const wxUploadFile = promisify(wx.uploadFile)
const db = wx.cloud.database()
Page({ data: {
titleCount: 0,
contentCount: 0,
content: '',
images: []
}, onLoad(options) {
$init(this)
}, handleTitleInput(e) {
const value = e.detail.value
this.data.title = value
this.data.titleCount = value.length
$digest(this)
}, handleContentInput(e) {
const value = e.detail.value
this.data.content = value
this.data.contentCount = value.length
$digest(this)
},
chooseImage(e) {
wx.chooseImage({
count: 3,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: res => {
const images = this.data.images.concat(res.tempFilePaths) this.data.images = images.length <= 3 ? images : images.slice(0, 3)
$digest(this)
}
})
}, removeImage(e) {
const idx = e.target.dataset.idx
this.data.images.splice(idx, 1)
$digest(this)
}, handleImagePreview(e) {
const idx = e.target.dataset.idx
const images = this.data.images wx.previewImage({
current: images[idx],
urls: images,
})
}, submitForm(e) {
var that = this;
var index = 0;
var len = that.data.images.length;
wx.showLoading({
title: '上传中...',
})
for(var i = 0; i < len ; i++)
{
console.log(i)
wx.getFileSystemManager().readFile({
filePath: that.data.images[i], //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
wx.cloud.callFunction({
name:'file',
data:{
path: 'pictures/' + util.vcode(new Date())+index+'.png',
file: res.data
},
success(_res){ console.log(_res)
wx.hideLoading()
//wx.hideLoading()
},fail(_res){
console.log(_res)
}
})
index++;
}
})
}
} })

其中 $digest(this) 与 $init(this) 是setData的封装写法

详细内容如下

微信小程序开发工具包-->Gitee

至于想用什么方式保存 返回的文件 id 取决于自己

云函数的写法

// 云函数入口文件
const cloud = require('wx-server-sdk')
const fs = require('fs')
const path = require('path')
cloud.init({
env: 'kindear-fd77cd'
}) exports.main = async (event, context) => { try{
return await cloud.uploadFile({
cloudPath: event.path,
fileContent: new Buffer(event.file, 'base64')
})
}catch(e){
return e;
}
}

其中,必须强调的是cloud.init 必须重新确定下环境id

不然上传的文件或者图片并不在小程序初始化的环境中

云函数实现效果

图片提交界面如图所示

点击提交

在云存储中查看

成功上传

一种云存储文件名称的编码方式

基本方式在js文件中已经有具体描述,通过具体到秒的时间 和 图片的上传顺序进行编码 基本可以保证不会有重名的文件存在

现在给出时间的编码方式

function vcode(date)
{
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate() var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds() return [year, month, day].map(formatNumber).join('_') + '_'+[hour, minute, second].map(formatNumber).join('_')
}

需要小程序开发的请联系我QQ:

小程序云开发--云函数上传文件或图片 base64的更多相关文章

  1. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  2. 上传附件(图片base64)封装方法

    上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...

  3. SpringMVC上传文件(图片)并保存到本地

    SpringMVC上传文件(图片)并保存到本地 小记一波~ 基本的MVC配置就不展示了,这里给出核心代码 在spring-mvc的配置文件中写入如下配置 <bean id="multi ...

  4. 微信小程序云开发-云存储-上传文件(图片/视频)到云存储 精简代码

    说明 图片/视频这类文件是从客户端会话选择文件. 一.wxml文件添加if切换显示 <!--上传文件到云存储--> <button bindtap="chooseImg&q ...

  5. 微信小程序选择视频,视频上传,视频播放

    请查看链接地址看具体详情: 选择视频: https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-video.html#wxchoosevideoobje ...

  6. 微信小程序 springboot nginx 做图片存储 上传 浏览

    微信小程序前端-springboot后端-nginx图片存储 前言 本人小白一名,这是第一次学习微信小程序,特此做个记录. 首先准备nginx做图片存储 选择一个地址存放图片 #我的地址 [root@ ...

  7. Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)

    1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...

  8. python 全栈开发,Day86(上传文件,上传头像,CBV,python读写Excel,虚拟环境virtualenv)

    一.上传文件 上传一个图片 使用input type="file",来上传一个文件.注意:form表单必须添加属性enctype="multipart/form-data ...

  9. Android应用开发中webview上传文件的几种思路

    1. 常规方法,重写WebChromeClient 的 openFileChooser 方法 private class MyWebChromeClient extends WebChromeClie ...

随机推荐

  1. 如何让外网访问自己的本地Web服务

    目前很多网站开发者安装了IIS或者Apache等Web服务器,可以把自己电脑配置成一以路由为中心的内网服务器. 本地服务器在内网测试是绰绰有余的,但是有些项目需要演示给异地的客户验收,而又赶不及把自己 ...

  2. nc_netcat命令

    它可以打开TCP连接.发送UDP数据包.监听任意TCP和UDP端口,进行端口扫描,处理IPv4和IPv6 这个命令适用于写脚本 nc  -z -w 10 ip port -z:指定NC只应扫描侦听守护 ...

  3. vs2017无法安装

    vs2017无法安装,无错误提示和日志 参考:https://blog.csdn.net/jq0123/article/details/83987686 但是解决方法不一样,运行安装程序没有提示,需要 ...

  4. NABCD分析---校园服务

    N(需求): 大学生活中,很多琐碎的小事浪费同学时间精力.我们的APP本着为同学服务的宗旨,解决生活中各方面的问题,同学们可以在APP上发布各种信息,例如兼职,二手买卖等等. A(做法): 用户打开A ...

  5. django js引入失效问题

    今天将项目中html文件下的自定义scrept代码单独独立,结果js引入无效,没有任何时间效果,在浏览器查看引入文件也正常. 后来发现自己引入的位置不对,js的引入文件应该放在body体内,而我把他们 ...

  6. U盘制作系统盘的方法:

    1, 使用 u 盘制作 ubuntu16.04 的方法, 安装软件后,直接使用软件将 U盘制作成系统盘就好了 [1] 下载安装工具: UltraISO  官网:  http://www.ezbsyst ...

  7. python 练习1(流控制)

    #!/usr/bin/python #_*_ coding:utf-8 _*_ #练习题 #1.使用while循环输入 1 2 3 4 5 6 8 9 10 #a.定义一个变量存放数字 #b.用whi ...

  8. redis 哈希(hash)函数

    哈希(hash)函数 hSet 命令/方法/函数 Adds a value to the hash stored at key. If this value is already in the has ...

  9. SQL kaggle learn with as excercise

    rides_per_year_query = """ SELECT EXTRACT(YEAR FROM trip_start_timestamp) AS year ,CO ...

  10. Hunspell介绍及试用

    1.简介 Hunspell是一个为拥有多态和复杂组合词的语言所设计的拼写检查器,原本为匈牙利语设计. Hunspell是一个自由软件,在GPL.LGPL和MPL三许可证下发行. Hunspell对主要 ...