使用uniapp和uview上传图片

3 篇文章 0 订阅
1 篇文章 0 订阅

不多BB,上代码,各位看官:

​
template部分:
<u-upload ref="uUpload" :action="action" :before-upload="beforeUpload" :file-list="lungFileList"></u-upload>

js部分:
beforeUpload(index,list) {
	this.beforeAvatarUpload(list)  
},
beforeAvatarUpload(file) {
	let param = {};
	param.imgType = "lung";
	param.visitId = uni.getStorageSync("visitorItem").id;
	uni.uploadFile({
		url: this.baseURL + '/patient/image',//你上传接口
		filePath:file[0].url,//上传的文件
		name:"fileName", //后台接收文件的标识
		formData:{  //传递的额外参数,只能是objectle类型
			"param":JSON.stringify(param) //自己项目需要
		}, 
		success: (res) => {
						console.log(res)
						if (res.data.status == 'SUCCESS') {
							
						} else {
							
						}
					},
					fail: (err) => {
						
					}
		});
	}

​

 

  • 2
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
使用uniapp结合uView进行拍照上图片的过程中,可以通过以下步骤实现: 1. 在模板中设置一个按钮,用于触发拍照事件: ``` <view class="u-upload" @click="takePhoto"> <u-icon class="u-icon-upload" name="camerafill"></u-icon> </view> ``` 2. 在methods中实现takePhoto方法,用于触发拍照事件: ``` takePhoto() { const camera = uni.chooseImage({ count: 1, // 一次只能拍摄一张照片 sourceType: ['camera'], // 指定拍照来源为相机 success: (res) => { // 上图片 this.uploadImage(res.tempFilePaths[0]); }, fail: (err) => { uni.showToast({ icon: 'none', title: '拍照失败' }); console.error(err); } }); }, ``` 3. 在uploadImage方法中,使用uni.uploadFile方法上图片,并在success回调函数中获取上后的图片地址: ``` uploadImage(filePath) { const upload = uni.uploadFile({ url: 'your-upload-api', // 上图片的接口地址 filePath: filePath, name: 'file', // 上图片时的参数名 success: (res) => { const imageUrl = JSON.parse(res.data).data.url; // 解析上后的图片地址 // 将图片地址赋值给data中的imageUrl变量 this.imageUrl = imageUrl; }, fail: (err) => { uni.showToast({ icon: 'none', title: '上失败' }); console.error(err); } }); }, ``` 4. 最后将生成的图片地址赋值给data中的imageUrl变量即可: ``` data() { return { imageUrl: '' }; } ``` 以上步骤适用于在H5端使用uniapp结合uView进行拍照上图片,希望能够帮助到你。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值