当前位置: 首页 > news >正文

微信小程序:上传图片到别的域名文件下

效果

wxml

<!-- 上传照片 -->
<view class="addbtn"><view class='pic' name="fault_photo" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"><image class='weui-uploader_img ' src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"><image src='{{clear}}' class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></image></image></view><view class="addphoto" bindtap="add_photo"><image src="{{add}}" class="addtext">+</image></view>
</view>
<button bindtap="sumbit">提交</button>

wxss

/* 上传照片样式 */
.line3 {padding-top: 8%;background-color: white;width: 100%;padding-bottom: 4%;/* border: 1px solid black; */
}.addbtn {padding-top: 5%;margin-left: 2%;padding-bottom: 5%;/* border: 1px solid black; */
}.pic {float: left;position: relative;margin-right: 9px;margin-bottom: 9px;/* border: 1px solid black;  */
}.weui-uploader_img {/* border: 1px solid black; */width: 150rpx;height: 150rpx;
}.delete-btn {position: absolute;top: -14rpx;right: -14rpx;width: 20px;height: 20px;z-index: 9999;
}.addphoto {width: 150rpx;height: 150rpx;display: flex;flex-direction: column;align-items: center;justify-content: center;/* background-color: #F6F6F6; */border: 1px dashed #C6C6C6;
}.addtext {/* border: 1px solid black; *//* font-size: 50px; */width: 80rpx;height: 80rpx;color: #BFC1C2;
}

js

const app = getApp()
Page({data: {//上传照片图片clear: app.globalData.icon + 'photo/clear.png',add: app.globalData.icon + 'photo/photo.png',imgs: [],allphoto: [],},//上传图片add_photo(e) {var that = this;var imgs = this.data.imgs;if (imgs.length >= 9) {this.setData({lenMore: 1});setTimeout(function () {that.setData({lenMore: 0});}, 2500);return false;}wx.chooseImage({ //图片相机的选择chooseMedia// count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePaths;// console.log('返回图片路径信息', res.tempFilePaths)var imgs = that.data.imgs;for (var i = 0; i < tempFilePaths.length; i++) {if (imgs.length >= 9) {that.setData({imgs: imgs});return false;} else {imgs.push(tempFilePaths[i]);}}that.setData({imgs: imgs});console.log('图片合集', that.data.imgs);}});},// 删除图片deleteImg: function (e) {var imgs = this.data.imgs;var index = e.currentTarget.dataset.index;imgs.splice(index, 1);this.setData({imgs: imgs});// console.log('上传图片合集', this.data.imgs);},// 预览图片previewImg: function (e) {//获取当前图片的下标var index = e.currentTarget.dataset.index;//所有图片var imgs = this.data.imgs;wx.previewImage({//当前显示图片current: imgs[index],//所有图片urls: imgs})},sumbit(){console.log(this.data.imgs)//先执行图片上传let imgs = this.data.imgs// console.log(this.data.imgs)for (var i = 0; i < this.data.imgs.length; i++) {var that = thiswx.uploadFile({//别的域名文件url: 'https://域名/api/api_wxmini.php',filePath: imgs[i],name: "file",header: {"content-type": "multipart/form-data"},success: function (res) {if (res.statusCode == 200) {wx.showToast({title: "上传成功",icon: "none",duration: 1500})console.log(res.data)that.data.allphoto.push(res.data) //向数组末端插入数据}},fail: function (err) {wx.showToast({title: "上传失败",icon: "none",duration: 2000})},})}}
})

php

别的文件路径

图片路径 

代码

<?php$file = $_FILES['file']; //获取小程序传来的图片$imgdirs = "../update_img/";//文件夹名称(/upload/update_img/)mkdirs($imgdirs);//创建$imgdirs文件夹//获取图片文件的名字$fileName = $_FILES["file"]["name"];// //获取图片类型$file_type = $_FILES["file"]["type"];$type = '';//判断是否是图片switch ($file_type) {case 'image/png':$type = '.png';break;case 'image/gif':$type = '.gif';break;case 'image/jpeg':$type = '.jpg';break;}//图片保存的路径$savepath = $imgdirs.$fileName; //upload/update_img/文件名// 临时文件移动到指定文件夹$rs = move_uploaded_file($_FILES["file"]["tmp_name"],$savepath);//成功上传文件if($rs) {$url = 'SO/'.$fileName;echo json_encode($url, JSON_UNESCAPED_SLASHES);} else {$result=array('errno'=>1,'message'=>'失败信息');echo json_encode($result);}//创建文件夹 权限问题function mkdirs($dir, $mode = 0777){if (is_dir($dir) || @mkdir($dir, $mode)) return TRUE;if (!mkdirs(dirname($dir), $mode)) return FALSE;return @mkdir($dir, $mode);}
?>

微信公众平台

上添加需要访问的域名

相关文章:

微信小程序:上传图片到别的域名文件下

效果 wxml <!-- 上传照片 --> <view class"addbtn"><view classpic name"fault_photo" wx:for"{{imgs}}" wx:for-item"item" wx:key"*this"><image classweui-uploader_img src"{{item}}"…...

Linux----内核及发行版

1. Linux内核 Linux内核是操作系统内部操作和控制硬件设备的核心程序&#xff0c;它是由芬兰人林纳斯开发的。 内核效果图: 说明: 真正操作和控制硬件是由内核来完成的&#xff0c;操作系统是基于内核开发出来的。 2. Linux发行版 是Linux内核与各种常用软件的组合产品&am…...

设备制造行业CRM:提升客户满意度,驱动业务增长

设备制造行业客户需求多样化、服务链路长&#xff0c;企业在关注APS、EMS等工业软件之余还要以客户为中心&#xff0c;做好客户服务。设备制造行业CRM管理系统是企业管理客户关系的利器&#xff0c;设备制造行业CRM的作用有哪些&#xff1f;一文带您看懂。 设备制造行业需要解…...

JavaScript实现复制功能函数

function copyUrl() {var copyText document.getElementById("url");copyText.select();document.execCommand("copy"); }其中&#xff0c;copyUrl()函数用于复制&#xff0c;document.getElementById(“url”)用于获取链接的DOM元素&#xff0c;select()…...

JVM垃圾收集器

主要垃圾收集器如下&#xff0c;图中标出了它们的工作区域、垃圾收集算法&#xff0c;以及配合关系。 HotSpot虚拟机垃圾收集器 这些收集器里&#xff0c;面试的重点是两个——CMS和G1。 Serial 收集器 Serial&#xff08;串行&#xff09;收集器是最基本、历史最悠久的垃圾…...

LeetCode(58)随机链表的复制【链表】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 随机链表的复制 1.题目 给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节…...

JVM源码剖析之registerNatives方法

目录 版本信息&#xff1a; 写在前面&#xff1a; 源码论证&#xff1a; 总结&#xff1a; 版本信息&#xff1a; jdk版本&#xff1a;jdk8u40 写在前面&#xff1a; 在Java类库中很多类都有一个registerNatives的native方法&#xff0c;并且写在static静态代码块中进行初…...

HarmonyOS鸿蒙应用开发——数据持久化Preferences

文章目录 数据持久化简述基本使用与封装测试用例参考 数据持久化简述 数据持久化就是将内存数据通过文件或者数据库的方式保存到设备中。HarmonyOS提供两两种持久化方案&#xff1a; Preferences&#xff1a;主要用于保存一些配置信息&#xff0c;是通过文本的形式存储的&…...

C++STL库的 deque、stack、queue、list、set/multiset、map/multimap

deque 容器 Vector 容器是单向开口的连续内存空间&#xff0c; deque 则是一种双向开口的连续线性空 间。所谓的双向开口&#xff0c;意思是可以在头尾两端分别做元素的插入和删除操作&#xff0c;当然&#xff0c; vector 容器也可以在头尾两端插入元素&#xff0c;但是在其…...

Vuex快速上手

一、Vuex 概述 目标&#xff1a;明确Vuex是什么&#xff0c;应用场景以及优势 1.是什么 Vuex 是一个 Vue 的 状态管理工具&#xff0c;状态就是数据。 大白话&#xff1a;Vuex 是一个插件&#xff0c;可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如&#xff1a;购…...

计网 - LVS 是如何直接基于 IP 层进行负载平衡调度

文章目录 模型LVS的工作机制初探LVS的负载均衡机制初探 模型 大致来说&#xff0c;可以这么理解&#xff08;只是帮助我们理解&#xff0c;实际上肯定会有点出入&#xff09;&#xff0c;对于我们的 PC 机来说&#xff0c;物理层可以看成网卡&#xff0c;数据链路层可以看成网卡…...

GEE机器学习——利用支持向量机SVM进行土地分类和精度评定

支持向量机方法 支持向量机(Support Vector Machine,SVM)是一种常用的机器学习算法,主要用于分类和回归问题。SVM的目标是找到一个最优的超平面,将不同类别的样本点分隔开来,使得两个类别的间隔最大化。具体来说,SVM通过寻找支持向量(即距离超平面最近的样本点),确定…...

【ARM Trace32(劳特巴赫) 使用介绍 13 -- Trace32 断点 Break 命令篇】

文章目录 1. Break.Set1.1 TRACE32 Break1.1.1 Break命令控制CPU的暂停1.2 Break.Set 设置断点1.2.1 Trace32 程序断点1.2.2 读写断点1.2.2.1 变量被改写为特定值触发halt1.2.2.2 设定非值触发halt1.2.2.4 变量被特定函数改写触发halt1.2.3 使用C/C++语法设置断点条件1.2.4 使用…...

【JVM入门到实战】(三) 查看字节码文件的工具

一、 javap -v命令 javap是JDK自带的反编译工具&#xff0c;可以通过控制台查看字节码文件的内容。适合在服务器上查看字节码文件内容。直接输入javap查看所有参数。输入javap -v 字节码文件名称 查看具体的字节码信息。&#xff08;如果jar包需要先使用 jar –xvf 命令解压&a…...

9:00面试,9:05就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到12月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40…...

无需重启,修改Linux服务器时区

Linux修改服务器时区&#xff08;无需重启&#xff09; 1、复制命令&#xff1a;2、使用tzselect命令&#xff1a;3、使用date查看是否修改正确 1、复制命令&#xff1a; cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime2、使用tzselect命令&#xff1a; tzselect按照要…...

【Android嵌入式开发及实训课程实验】【项目1】 图形界面——计算器项目

【项目1】 图形界面——计算器项目 需求分析界面设计实施1、创建项目2、 界面实现实现代码1.activity_main.xml2.Java代码 - MainActivity.java 3、运行测试 注意点结束~ 需求分析 开发一个简单的计算器项目&#xff0c;该程序只能进行加减乘除运算。要求界面美观&#xff0c;…...

利用SPSS进行神经网络分析过程及结果解读

模拟人类实际神经网络的数学方法问世以来&#xff0c;人们已慢慢习惯了把这种人工神经网络直接称为 神经网络。 神经网络在系统辨识、模式识别、智能控制等领域有着广泛而吸引人的前景&#xff0c;特别在智能控制中&#xff0c;人们对神经网络的自学习功能尤其感兴趣&#xff0…...

聚观早报 |东方甄选将上架文旅产品;IBM首台模块化量子计算机

【聚观365】12月6日消息 东方甄选将上架文旅产品 IBM首台模块化量子计算机 新思科技携手三星上新兴领域 英伟达与软银推动人工智能研发 苹果对Vision Pro供应商做出调整 东方甄选将上架文旅产品 东方甄选宣布12月10日将在东方甄选APP上线文旅产品&#xff0c;受这一消息影…...

web服务器之——www服务器的基本配置

目录 一、www简介 1、什么是www 2、www所用的协议 3、WEB服务器 4、主要数据 5、浏览器 二、 网址及HTTP简介 1、HTTP协议请求的工作流程 三、www服务器的类型(静态网站&#xff08;HTML&#xff09;&#xff0c; 动态网站(jsp python,php,perl)) 1、 仅提供…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

基于Java+VUE+MariaDB实现(Web)仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

第22节 Node.js JXcore 打包

Node.js是一个开放源代码、跨平台的、用于服务器端和网络应用的运行环境。 JXcore是一个支持多线程的 Node.js 发行版本&#xff0c;基本不需要对你现有的代码做任何改动就可以直接线程安全地以多线程运行。 本文主要介绍JXcore的打包功能。 JXcore 安装 下载JXcore安装包&a…...

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...