图片上传、后端输出下载图片（微信小程序无师自通四）

微信小程序图片上传并显示

前端上传：

小汽车保养里程碑微信小程序中，需要上传汽车零件的照片，车辆的照片。小程序使用wx.chooseMedia() 和wx.uploadFile() 函数上传小程序前端的照片文件。chooseMedia会拿到本地文件的文件名，uploadFile把这个文件向服务器的API上传。

// 上传图片到服务器upload_pic_to_server() {//图片下载 https://w1914z4829.zicp.fun/download/20230421_112425_65.png var server_upload_url = 'https://w1914z4829.zicp.fun/upload' //后端服务器文件上传地址，let that = thiswx.chooseMedia({count: 1,mediaType: ['image'],sourceType: ['album', 'camera'],maxDuration: 30,camera: 'back',success(res: any) {console.log(res.tempFiles[0].tempFilePath)console.log(res.tempFiles[0].size)wx.uploadFile({filePath: res.tempFiles[0].tempFilePath, //前端临时文件路径url: server_upload_url,name: 'file',timeout: 5000,success(res2: any) { that.setData({ imgPath: 'https://w1914z4829.zicp.fun/download/' + res2.data.substr(1, 18) }) }})}})},

前端显示：

就是简单的显示一个图片的URL就可以显示出图片

 <view class='pic_box'  > <image class='pic_image' src="{{imgPath}}" mode=""/> </view><button bindtap="upload_pic_to_server">点击上传</button>

服务器端：

/download API用于把服务器上的文件传给前端。

/upload API用于接收前端上传的照片文件。图片上传后会按时间戳产生一个文件ID，服务器按这个ID生成图片文件名，保存到服务器上，然后再返回这个文件ID给前端，前端可以用这个文件ID和表单的其它字段一起提交到数据库。


//-------GET-----文件上传------------------
app.MapPost("/upload", async (IFormFile file) =>
{string server_file_id = System.DateTime.Now.ToString("yyyyMMdd_HHmmss_ff");string server_file_name = "d:\\" + server_file_id + ".png";using var stream = File.OpenWrite(server_file_name);await file.CopyToAsync(stream);ps(server_file_name);return Results.Ok(server_file_id);});//-----这里比较有意思，按API输出一个图片的url,https://w1914z4829.zicp.fun/download/20230421_112425_65.png
//-------GET-----文件下载--------------
app.MapGet("/download/{server_file_id}", (string server_file_id) =>  Results.File("d:\\" + server_file_id + ".png"));

图片上传、后端输出下载图片（微信小程序无师自通四）相关推荐

微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
php微信上传视频文件在哪里,微信小程序中实现上传视频的开发代码
本篇文章给大家带来的内容是关于微信小程序中实现上传视频的开发代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 其实这个比较简单,官方提供了API接口,基本上直接调用就可以了,话不多 ...
php相册实现图片上传源码,php 图片上传源码下载[gif,jpg]
php 图片上传源码下载[gif,jpg] 无标题文档 $dest_folder = "/picture/"; if(!file_exists($dest_folder)){ ...
**微信小程序图片上传+后台PHP修改图片名称**
微信小程序图片上传+后台PHP修改图片名称前端代码:比较随意 <view class="weui-uploader"><view class="img ...
themyleaf 图片上传_javaEE --springboot #实现图片上传和回显 #单文件上传 #多文件上传 #ajax异步文件上传（非常详细，从创建项目开始）...
实现文件上传和回显 1.新建一个SpringBoot项目,选择 Spring Web 和 thymeleaf 依赖 .pow.xml文件下的依赖如下 2.根据下图,创建如下文件 3.直接上代码配置文 ...
php 更改图片后缀名,PHP在图片上传时如何改变图片后缀为jpg
PHP在图片上传时改变图片后缀为jpg的方法:首先获取上传的图片后缀,并获取图片在电脑上的临时存储位置:然后获取临时存储文件的后缀:最后实现后缀转换,代码为[case 'im{ / S # p |ag ...
antd 图片上传遇到的坑----图片回显（Upload）
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...
jsp图片上传提交前，图片显示在页面上
<divclass="upload_box"> <b>上传图片</b> <inputtype="file"name=& ...
云开发祖传七星彩等梦码微信小程序源码
简介: 祖传七星彩等梦码微信小程序源码,安装搭建简单,云开发无后台这个小程序的内容对于一般的小伙伴来说可能是一脸懵逼但是对于海南和广东地区的小伙伴来说应该是不陌生因为这两个地区的人可能都打七星彩 ...

图片上传、后端输出下载图片（微信小程序无师自通四）

图片上传、后端输出下载图片（微信小程序无师自通四）相关推荐

最新文章

热门文章