文章目录

Flask与微信小程序之文件上传与显示
- 背景
- flask_uploads应用
- - flask_uploads的使用步骤
  - - 1 安装flask-uploads模块
    - 2 在文件夹中导入需要用到的库
    - 3 在config.py 配置文件上传的路径，以及限制上传文件的类型
    - 4 实例化UploadSet对象并将app的config配置注册到UploadSet对象上
    - 5 创建上传文件的路由
    - 6 创建一个显示图片的路由
  - flask_uploads使用过程中需要注意的事项
  - - 1. 上传文件可选择的类型有：
    - 2. config中的变量与uploadset的对应
    - 3. 限制上传文件的大小
    - 4. 防止爬取图片
- 微信小程序上传文件
- - Choose Image
  - - 官方文档
    - 主要的参数如下
  - UploadFile的使用
  - - 官方文档对该函数的参数
    - 上面后端代码对应的前端代码
  - 前端同时传递file与data的方法如下：

Flask与微信小程序之文件上传与显示

背景

因为写的项目在发布任务的时候需要附加一张图片，所以后台需要一个图片上传的api接口，然后用原来的flask进行传送文件并不是十分地方便，因此此处使用的是flask_uploads模块

flask_uploads应用

官方文档

flask_uploads的使用步骤

1 安装flask-uploads模块

pip install flask-uploads

2 在文件夹中导入需要用到的库

from flask_uploads import UploadSet, configure_uploads, IMAGES, patch_request_class

3 在config.py 配置文件上传的路径，以及限制上传文件的类型

UPLOADED_PHOTOS_DEST = './images/'  # 相对路径下的文件夹images
UPLOADED_PHOTO_ALLOW = IMAGES      # 限制只能够上传图片

4 实例化UploadSet对象并将app的config配置注册到UploadSet对象上

uploaded_photos = UploadSet('photos')
configure_uploads(app, uploaded_photos)

5 创建上传文件的路由

路由说明：
url = "/temp/upload/<openid>"
methods = ['POST']
return_msg:
{'error' : 0/1'data': {'msg': '没有图片上传/创建成功/图片上传失败''url':  image_path}
}

@app.route("/temp/upload/<openid>", methods=['POST'])
def upload_temp_image(openid):openid = int(openid)filenames = os.listdir("./images")for filename in filenames:temp = filename.split('--')if len(temp) < 2:continueif temp[1] == str(openid) + '.png':os.remove('./images/' + filename)print('删除重复文件')breakphoto = request.files['photo']if photo.filename == '':print('No selected file')return str({'error': 1, "data": {'msg': '没有图片上传', 'url':""}})else:try:photo.filename = generate_verification_code() + '--' + str(openid) + '.png'uploaded_photos.save(photo)image_path = uploaded_photos.url(photo.filename)return str({'error': 0, "data": {'msg': '创建成功', 'url': image_path}})except Exception as e:print('upload file exception: %s' % e)return str({'error': 1, "data": {'msg': '图片上传失败', 'url':""}})

6 创建一个显示图片的路由

@app.route("/_uploads/photos/<image_path>")
def show_image(image_path):'''利用图片url用于显示'''with open(UPLOADED_PHOTOS_DEST + image_path, 'rb') as f:image = f.read()pic_url = Response(image, mimetype="image/jpeg")return pic_url

flask_uploads使用过程中需要注意的事项

1. 上传文件可选择的类型有：

IMAGES = tuple('jpg jpe jpeg png gif svg bmp'.split())
DOCUMENTS = tuple('rtf odf ods gnumeric abw doc docx xls xlsx'.split())
AUDIO = tuple('wav mp3 aac ogg oga flac'.split())
TEXT = ('txt',)
DEFAULT = TEXT + DOCUMENTS + IMAGES + DATA

2. config中的变量与uploadset的对应

源码部分：
def config_for_set(uset, app, default=None):config = app.configprefix = 'UPLOADED_%s_' % uset.name.upper()using_defaults = Falseif defaults is None:defaults = dict(dest=None, url=None)allow_extns = tuple(config.get(prefix + 'ALLOW', ()))deny_extns = tuple(config.get(prefix + 'DENY', ()))destination = config.get(prefix + 'DEST')base_url = config.get(prefix + 'URL')

3. 限制上传文件的大小

patch_request_class(app, 32 * 1024 * 1024)

4. 防止爬取图片

上传的图片添加随机6位数字前缀，然后将对应的url存储与数据库之中

photo.filename = generate_verification_code() + '--' + str(openid) + '.png'

微信小程序上传文件

Choose Image

官方文档

主要的参数如下

属性	说明
count	最多可以选择的图片张数
sizeType	所选择的图片的尺寸 [‘original’, ‘compressed’]
sourceType	选择图片的来源 [‘album’, ‘camera’]
success	上传成功的回调函数 tempFilePaths：图片的本地临时文件路径列表

UploadFile的使用

官方文档对该函数的参数

上面后端代码对应的前端代码

async selectImg() {var that = thiswx.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: function(res) {var tempFilePaths = res.tempFilePaths// that.setData({//   image_src: tempFilePaths// })that.tempFilePath = tempFilePathswx.uploadFile({url: BASIC_REQUEST_URL + '/temp/upload/' + that.openid,filePath: that.tempFilePath[0],name: 'photo',success (res) {console.log(res)var datas = JSON.parse(res.data.replace(/'/g, '"'))console.log(datas)that.setData({image_src: datas.data.url})that.image_src = datas.data.url}})}})
}

前端同时传递file与data的方法如下：

wx.uploadFile({url: BASIC_REQUEST_URL + '/tasks/create/',filePath: that.tempFilePath[0],name: 'photo',formData: {'openid': that.openid,'limit_time': that.endDate + ' ' + that.endTime + ':00','limit_num': parseInt(that.limit_num),'title': that.taskTitle,'content': that.content,'tag': that.TaskTypes[that.TaskTypeIndex],'reward': parseInt(that.reward),'problem_content': problemContent},success (res) {console.log(res)var datas = JSON.parse(res.data.replace(/'/g, '"'))that.onLoad()}
})

其余详情可以参见闲余翻身

Flask与微信小程序之文件上传与显示相关推荐

微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html  <view class="cont ...
微信小程序媒体文件上传到微信服务器
微信小程序媒体文件上传到微信服务器官方给出的事例如下: curl -F media=@test.jpg "https://api.weixin.qq.com/cgi-bin/media/up ...
微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
微信小程序多文件上传方法
最近工作项目主要是微信小程序,这篇主要介绍接到的一个需求--多图片上传. 知道需求后马上查了下小程序的api,发现wx.uploadFile并不支持多文件上传,这样就得循环上传,肯定影响速度,后来发现 ...
微信小程序多文件上传（docx，ppt，pdf，zip，jpg···）
这遍文章主要介绍下,在小程序的开发过程中实现多个文件上传的实现方法. chooseMessageFile 使用这一种方式进行多文件的上传时,就是说从客户端会话选择文件,下面是chooseMessage ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除点击上传作业在js文件中: Page({ / ...
uniapp 微信小程序开发图片上传压缩
uniapp 微信小程序开发图片上传压缩安卓上传图片并压缩思路全部代码安卓上传图片并压缩由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...
微信小程序实现录音上传
微信小程序实现录音上传准备开始准备 1.微信开发者工具 2.Api文档开始打开微信开发者工具项目->新建项目选择小程序 appid是在微信公众平台申请的. 链接新建完成后,项目自 ...

Flask与微信小程序之文件上传与显示

文章目录

Flask与微信小程序之文件上传与显示

背景

flask_uploads应用

flask_uploads的使用步骤

1 安装flask-uploads模块

2 在文件夹中导入需要用到的库

3 在config.py 配置文件上传的路径，以及限制上传文件的类型

4 实例化UploadSet对象并将app的config配置注册到UploadSet对象上

5 创建上传文件的路由

6 创建一个显示图片的路由

flask_uploads使用过程中需要注意的事项

1. 上传文件可选择的类型有：

2. config中的变量与uploadset的对应

3. 限制上传文件的大小

4. 防止爬取图片

微信小程序上传文件

Choose Image

官方文档

主要的参数如下

UploadFile的使用

官方文档对该函数的参数

上面后端代码对应的前端代码

前端同时传递file与data的方法如下：

Flask与微信小程序之文件上传与显示相关推荐

最新文章

热门文章