微信小程序 editor图片上传到node服务器并展示在当前页面

news2024/11/23 12:27:35

前端 

html

<!-- 富文本 -->
			  <view  class="container">
			    <editor id="editor" ref="editor"  :placeholder=placeholder  @input="onInput"  @ready="onEditorReady">
			    </editor>
			  </view>
			<view class="addForum_image" >
				<image src="https://img.icons8.com/officel/80/add-image.png" alt="picture" mode='aspectFit' @tap="insertImage"/>	
				<!-- <image src="https://img.icons8.com/ultraviolet/80/add-image.png" alt="picture" mode='aspectFit'/> -->
			</view>

js

// 上传图片到服务器
			insertImage() {
			        var that = this
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
						sourceType: ['album'], //从相册选择
						success: function (res) {
							console.log(JSON.stringify(res.tempFilePaths));
							const tempFilePaths = res.tempFilePaths
							uni.uploadFile({
							      url: httpUrl+'/aydoorumomg',
							      filePath: tempFilePaths[0],
							      name: 'file',
							      success(uploadFileRes) {
							        const data = JSON.parse(uploadFileRes.data).location
									console.log(data);
							        // 上传成功,获取服务器返回的图片路径和名称
							        // 将图片信息存储至数据库或文件
									that.editorCtx.insertImage({
									      src: data,
									    })
							      }
							    })
						}
					});
			},
			

node后端

//上传论坛帖子图片
    adoporomIog(req,res){
        console.log('上传文件');
        console.log(req.file);
        const file = req.file
        const fileName = `${Date.now()}-${file.filename}.${file.originalname.slice(file.originalname.lastIndexOf('.') + 1)}`
        const uploadFile = fs.createWriteStream(`./public/images/forumimages/${fileName}`,{
            highWaterMark:1024*1024*50
        })
        req.socket.setTimeout(120000)
        req.setTimeout(120000)
        const fileStream = fs.createReadStream(file.path)
        let uploadComplete = false  
        fileStream.on('error', err => {
            uploadFile.close()
        })  
        fileStream.pipe(uploadFile).on('finish', () => {
        uploadComplete = true
        uploadFile.close()  
    })
    res.json({ 
        location: `https://gothordoeaos.com:9990/images/forumimages/${fileName}` 
    })
    },

效果  小程序端

 

 

后台

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/702281.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

pytorch 的matmult()函数详解

torch.matmul()也是一种类似于矩阵相乘操作的tensor连乘操作。但是它可以利用python中的广播机制&#xff0c;处理一些维度不同的tensor结构进行相乘操作。 matmul 就是矩阵求 叉乘 如果是二维矩阵&#xff0c;两个矩阵的大小应该为m*n &#xff0c;n*m。 一维向量的乘积&…

使用 .NET 开始 OpenAI Completions

作者&#xff1a;Luis Quintanilla 翻译&#xff1a;Alan Wang 排版&#xff1a;Alan Wang 欢迎来到有关 OpenAI 和 .NET 的博客系列&#xff01; 如果您是新来的&#xff0c;请查看我们的第一篇文章&#xff0c;我们在其中介绍了系列内容&#xff0c;并向您展示如何在 .NET 中…

vue3 elementplus table表格多行合计

表格底部如何多行合计 1.先在标签上定义合计方法 <el-table:data"data":summary-method"getSummaries":show-summary"true"selection-change"handleSelectionChange">2.文件头部引入h函数渲染多行div&#xff0c;BigNumber 防…

2023上半年软考系统分析师科目一整理-15

2023上半年软考系统分析师科目一整理-15 信息系统的性能评价指标是客观评价信息系统性能的依据&#xff0c;其中&#xff0c;&#xff08; &#xff09;是指系统在单位时间内处理请求的数量。 &#xff08;60&#xff09;A.系统响应时间 B.吞吐量 C.资源利用率 D.并发用户数 吞…

(四)灌溉系统硬件部分(更换为esp32实现)

ESP32入门&#xff1a;添加链接描述 模拟ESP32环境的在线工具&#xff1a;地址 Esp32的引脚知识&#xff1a;添加链接描述 ESP32(基于Arduino)连接EMQX的Mqtt服务器上传信息与命令控制:添加链接描述 TTL转RS-485模块:添加链接描述 等ttl转rs485模块到了&#xff0c;参考这篇…

【xss漏洞-svg标签】详解svg标签+触发XSS

目录 一、理论知识 SVG标签的使用 二、实战部分 一、理论知识 SVG标签的使用 代码中的SVG标签和onload事件本身并不依赖于其他特定的标签来触发弹窗。无论它们被放置在哪个标签内&#xff0c;只要浏览器解析并加载了这个SVG标签&#xff0c;onload事件就会被触发。 注&am…

SpringIOC机制详解

一、IOC概述及作用 &#xff08;一&#xff09;IOC的简介&#xff0c;设计思想 SpringIOC&#xff1a;IOC是Inversion of Control的缩写&#xff0c;多数书籍翻译成“控制反转”。 IOC这个概念简单来说就是把复杂系统分解成相互合作的对象&#xff0c;这些对象类通过封装以后…

Java 设计模式实战系列—工厂模式

在 Java 开发中&#xff0c;对象的创建是一个常见的场景&#xff0c;如果对象的创建和使用都写在一起&#xff0c;代码的耦合度高&#xff0c;也不利于后期的维护。我们可以使用工厂模式来解决这个问题&#xff0c;工厂模式是一个创建型模式&#xff0c;将对象的创建和使用分离…

树莓派使用Nginx 搭建轻量级网站远程访问

文章目录 1. Nginx安装2. 安装cpolar3.配置域名访问Nginx4. 固定域名访问5. 配置静态站点 转载自cpolar极点云文章&#xff1a;树莓派使用Nginx 搭建轻量级网站远程访问 安装 Nginx&#xff08;发音为“engine-x”&#xff09;可以将您的树莓派变成一个强大的 Web 服务器&#…

AMEYA360报道:瑞萨电子坐上MCU头把交椅背

综合IC Insights和拓墣产业研究院多方数据来看&#xff0c;2020年之后全球MCU市场增长动力强劲&#xff0c;尤其是汽车MCU市场&#xff0c;有着爆发的态势。具体来看&#xff0c;2022年全球MCU市场规模达到215亿美元&#xff0c;2021年-2026年期间市场的年复合增长率预计将达到…

Java性能权威指南-总结21

Java性能权威指南-总结21 Java EE性能调优对象序列化transient字段覆盖默认的序列化压缩序列化数据 Java EE性能调优 对象序列化 不同系统间的数据交换可以使用XML、JSON和其他基于文本的格式。Java进程间交换数据&#xff0c;通常就是发送序列化后的对象状态。尽管序列化在J…

记一次 .NET 使用 csreids 连接 Redis 超时问题

背景: 使用windows server 2016 , IIS 部署的程序运行一段时间后出现异常, Redis 部署在内网其他服务器; 通过windows 事件查看器发现一些错误日志 , CSRedis.Internal.IO.RedisSocketException: Connect to server timeout 大概意思为连接redis服务 超时; 错误 2023/6/29 11…

通过 Python 控制 AWG70001 发送任意波

0. 实验准备 泰克 AWG70001 一台电脑 一根网线 使用网线连接 AWG70001 和电脑&#xff0c;并且配置 IP 在同一网段下 1. 环境要求 vxi11 numpy struct matplotlib 没有的库可以使用下面的命令安装 pip install vxi11 pip install numpy pip install struct pip install matp…

苹果iphone如何备份整个手机 苹果怎么查备份的照片

手机上的数据变得越来越重要&#xff0c;大家也越来越注重数据安全。如果手机设备丢失的话&#xff0c;不仅是设备的丢失&#xff0c;还是数据的丢失。因此&#xff0c;备份数据就显得很重要。那么&#xff0c;iphone如何备份整个手机&#xff0c;苹果怎么查备份的照片&#xf…

C++day4

2、 #include <iostream>using namespace std;class Person { private:int age;int *p; public://无参构造Person():p(new int(89)){age 18;}//有参构造Person (int age,int num){this->age age;this-> p new int(num);}//拷贝构造函数(深度拷贝)Person(Person …

NTP时钟服务器推荐-国内时间服务器顶尖设备

电子钟时间服务器在物联网应用中起到了关键的作用&#xff0c;它能够为各种智能设备提供准确的时间参考&#xff0c;确保设备之间的协同工作和数据的准确传输。无论是智能家居、智能工厂还是智慧城市&#xff0c;电子钟时间服务器都是不可或缺的一部分。 一、产品卖点 时间服…

启动spring boot项目时加载配置文件报错的问题

最近把电脑重置了一下&#xff0c;然后重新安装各种软件&#xff0c;从gitee拉去项目到本地运行时居然启动报错了 Failed to load property source from file:/D:/program/IdeaProjects/layui/target/classes/application.yml 这是加载配置文件的时候失败了&#xff0c;提示一堆…

Multiple HTTP implementations were found on the classpath错误的解决方法

当我们的项目中集成了多个AWS相关Jar包时,有可能就会遇到这个错误: 错误信息: There is an issue with the connector Code: InvalidInput.InvalidConnectorConfiguration Message: The connector configuration is invalid. Message: Multiple HTTP implementations were f…

自定义MVC架构【上】

目录 一、前言 1.什么是MVC架构 2.使用MVC架构的好处 3.MVC架构与三层架构的区别 4.MVC架构的思路 二、自定义MVC 1.最初版本 2.进阶版 3.反射优化版 4.反射增强版 一、前言 1.什么是MVC架构 MVC架构&#xff08;Model-View-Controller&#xff09;&#xff0c;即模…

【MSP432电机驱动设计—下篇】霍尔编码器测车轮运行距离与M/T综合公式法测速概念

开发板型号为MSP432P401r 今日得以继续我的MSP432电赛速通之路&#xff0c;本篇使用MSP432编程学习霍尔编码器M/T公式法测速概念&#xff0c;最终实现用外部中断方式测得小车行走路程&#xff0c;文章学习讲解原理、附上实例实践、附上关键代码、附上…