uni——组件上传单张图片uni.chooseImage
组件 图片 uni
2023-09-14 09:04:08 时间
案例演示
案例代码
<view class="four" @click="uploadImg">
<block v-if="!succImg">
<view class="xiangji">
<image :src="$common.image('/static/xiangji.png')" mode="aspectFill"></image>
</view>
<view class="guihuan">
请上传照片(拍照或者相册选择)
</view>
</block>
<view class="showBox" v-if="succImg">
<image :src="$common.image(succImg)" mode="widthFix" class="showImg"></image>
</view>
</view>
data() {
return {
// 图片
succImg: '',
}
},
methods: {
uploadImg() {
uni.chooseImage({
sourceType: ['album', 'camera'], //从相册、相机
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: config[config.env].apiUrl + '/api/common/upload',
filePath: tempFilePaths[0],
name: 'file',
formData: {
'user': 'test'
},
success: (uploadFileRes) => {
// console.log(uploadFileRes);
let res = JSON.parse(uploadFileRes.data)
if (res.code == 1) {
this.$common.success(res.msg) //上传成功提示词
console.log(res);
this.succImg = res.data.url
// 调用接口 上传归还图片
this.returnImg()
}
if (res.code == 0) {
this.$common.success("非法图片") //上传成功提示词
}
}
});
}
});
},
returnImg() {
this.$common.request('post', '/order/doorImage', {
image: this.succImg,
// order_id:this.order_id
order_id: 21
}).then(res => {
if (res.code == 1) {
this.$common.success('图片提交成功')
}
})
},
}
.four {
margin: 80rpx 40rpx 0;
border: 2rpx solid #C3C3C3;
border-radius: 20rpx;
padding: 32rpx 0 36rpx 0;
.xiangji {
image {
width: 83rpx;
height: 75rpx;
}
}
.guihuan {
font-size: 30rpx;
color: #959595;
margin-top: 35rpx;
}
.showBox {
text-align: center;
.showImg {
width: 90%;
}
}
}
总结
https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile
相关文章
- createContext & useContext 上下文 跨组件透传与性能优化篇
- Office 365 自定义安装组件
- Hadoop 生态系统的构成(Hadoop 生态系统组件释义)
- 基于react的简单轻便的开源图片预览组件
- 逐步拆解React组件—Lazyload懒加载
- easycom模式使vue组件无需引入即可使用
- vue之图片上传组件封装
- Markdown文件居然也可以直接作为Vue路由组件?
- 强大的图片预览组件Viewer.js
- React源码学习入门(八)React组件挂载Component细节流程
- 子组件派发事件和值给父组件
- 音乐播放组件
- C/C++ Qt ToolBar 菜单栏组件应用
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- 【Android 应用开发】Android - 按钮组件详解
- 【Android 应用开发】UI绘制流程 ( 生命周期机制 | 布局加载机制 | UI 绘制流程 | 布局测量 | 布局摆放 | 组件绘制 | 瀑布流布局案例 )
- 【Flutter】Image 组件 ( cached_network_image 网络图片缓存插件 )
- 【错误记录】布局组件加载错误 ( Attempt to invoke virtual method ‘xxx$Callback android.view.Window.getCallback()‘ )
- Hadoop组件都有哪些?彼此关系是什么?相互如何写作的?
- Spring Cloud Stream核心组件Sink
- 一句话概括下spring框架及spring cloud框架主要组件详解架构师
- Oracle OSB组件实现智能系统集成(oracle osb组件)
- JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
- php通过COM类调用组件的实现代码