uni-app+thinkphp: 单图片文件上传(hbuilderx 3.7.3)
2023-09-14 09:01:15 时间
一,js代码:
<template> <view> <image mode="aspectFit" :src="imageSrc" @tap="chooseImage" style="background: gray; width:200rpx;height:200rpx;margin-left: 275rpx;" /> <button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;" type="primary" @tap="chooseImage">选择图片</button> <button style="width:550rpx;margin-left: 100rpx;margin-top: 30rpx;" type="primary" @tap="upload">上传图片</button> </view> </template> <script> export default { data() { return { imageSrc:'', } }, methods: { chooseImage(){ uni.chooseImage({ count: 1, sizeType:['copressed'], success:res => { //注意此处的写法,否则可能不能预览 //只有一张图片, 输出下标[0], 直接输出地址 var imgFile = res.tempFilePaths[0]; console.log(imgFile); this.imageSrc = imgFile; } }) }, upload(){ console.log("filepath:"); console.log(this.imageSrc); if (this.imageSrc == '') { //console.log(); let tip = '未选择图片文件!'; uni.showToast({ title:tip, icon:"error", }) return false; } uni.uploadFile({ url: '/api/goods/uploadone', //接口地址 filePath: this.imageSrc, name: 'file', formData: { 'user': 'test' }, success: (res) => { let data = JSON.parse(res.data); if (data.code == 0){ alert("上传成功:"+data.data.url); } else { alert("上传出错:"+data.msg); } } }); } } } </script> <style> </style>
说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,服务端php代码:
class Goods extends BaseController { //上传单一文件 public function uploadOne() { $file = request()->file('file'); if (is_null($file)) { return Result::ErrorCode(11,'没有文件上传'); } $size = $file->getSize(); $path = $file->getPathname(); if (is_file($path)){ $ext = strtolower($file->getOriginalExtension()); if (trim($ext) == '') { return Result::ErrorCode(1012,'文件名有错误'); } $newName = date('YmdHis').rand(1000,9999); $newName = $newName . '.' . $ext; $destDir = "/var/www/html/head"; //移动文件到指定目录,并重命名为新文件名 $file->move($destDir, $newName); //$user = $this->request->param('user','','string'); // var_dump($user); $imgUrl = "http://file.lhdtest.com/head/".$newName; $res = ['url'=>$imgUrl]; return Result::Success($res); } else { return Result::ErrorCode(1011,'文件不存在'); } }
三,测试效果:
四,查看hbuilderx的版本:
相关文章
- zx-editor 移动端(HTML5)富文本编辑器,可与原生App混合(hybrid)开发
- Windows Store App 全球化:在XAML元素中引用文件资源
- Windows Store App 变形特效
- 自己整理的ios app实现自动升级
- ios开发,app调用资源文件到C++的方法
- PMS及APP安装过程
- uni-app+thinkphp: 多图片文件上传(hbuilderx 3.7.3)
- uni-app: 使用自定义字体文件(hbuilderx 3.6.18)
- uni-app+thinkphp: 多图片文件上传(hbuilderx 3.7.3)
- [TP5] 动态绑定指定默认模块, 解决: 控制器不存在:appindexcontrollerApi
- ABAP, Maven, CF App和Webpack的build
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- App应用 - 小型系统架构
- Atitit 微服务的原理与实现方式 目录 第一章 什么是微服务?1 第二章 核心要素2 足够微小,2 服务化 进程隔离2 第三章 实现模式2 多个app启动文件(推荐轻量级)2 多项目
- paip.提高效率---微信 手机app快速开发平台—微网络撬动大市场
- 抖音APP告诉我们什么叫真正的性能优化天花板
- Android 11.0 系统默认授予app安装权限(去掉app首次运行时权限授权弹窗)
- Android app 读取xls和xlsx格式的excel文件
- 爱今天 APP 闪退怎么办?
- 超全的App 测试工具大全,收藏这篇就够了【附带官网|GitHub地址】
- 在微信开发者工具里运行微信小程序出现[ app.json 文件内容错误] (app.json: app.json 未找到)
- 安卓别老只盯着app那点东西研究,没事多学framework,突破内卷,提前扩张知识武器库等待机会换赛道
- Android 11.0 Folder文件夹全屏后文件夹图标列表居中时拖拽app到桌面的优化
- app登录页面