微信小程序上传图片到别的域名文件下的示例代码
更新时间:2023年12月13日 11:12:28 作者:雯0609~
这篇文章主要介绍了微信小程序上传图片到别的域名文件下的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
效果
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, // 默认9 sizeType: ['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 = this wx.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); } ?>
微信公众平台
上添加需要访问的域名
到此这篇关于微信小程序上传图片到别的域名文件下的文章就介绍到这了,更多相关微信小程序上传图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
ES6中export default和export之间的区别详解
export和export default都是es6语法中用来导出组件的,可以导出的文档类型有( 数据、常量、函数、js文件、模块等),下面这篇文章主要给大家介绍了关于ES6中export default和export之间的区别的相关资料,需要的朋友可以参考下2023-04-04各浏览器对document.getElementById等方法的实现差异解析
这篇文章主要是对各浏览器对document.getElementById等方法的实现差异进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助2013-12-12在VS Code中使用Snippet Craft扩展提高编码效率的过程详解
这篇文章主要介绍了在VS Code中使用Snippet Craft扩展提高编码效率,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下2024-08-08分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
今天地铁上和一个同事闲聊,给我说的一道题,回来想了想,写出来的,说来惭愧,我用的是行测方面数字推理里面的知识归纳出来的,当然这个可以用递归写出来,说说我的代码,以及递归的思路2012-10-10
最新评论