uniapp 实现上传图片和上传视频

上传视频

<view class="file-left" @click="chooseFile" v-if="File">
	<image class="img" src="../../../static/interview/shangchuan.png" mode=""></image>
	<text class="text">视频上传</text>
</view>
chooseFile() {
				uni.chooseFile({
					// sourceType:['album','camera'],
					extension: ['.mp4'],
					type: 'video',
					success: (res) => {
						const tempFilePath = res.tempFiles[0].path;
						this.uploadFile(tempFilePath);
					}
				});
			},
uploadFile(filePath) {
				uni.uploadFile({
					url: 'https://yyfw.allxiangcun.cn/api/upload-file',
					filePath: filePath,
					name: 'file',
					success: (uploadRes) => {
						// 处理上传成功的逻辑
						const responseData = JSON.parse(uploadRes.data);
						this.uploadinfo = responseData.data
						this.shot = false
						let data = []
						this.uploadedUrls.push(this.uploadinfo);
						this.uploadUrl = this.uploadedUrls.join(',');

						console.log('uploadUrl:', this.uploadUrl);
					},
					fail: (error) => {
						// 处理上传失败的逻辑
						console.log(error);
					}
				});
},

上传图片

<view class="file-right" @tap="onGetImgClick" v-show="shot">
	<image class="img" src="../../../static/interview/xiangji.png" mode=""></image>
	<text class="text">拍照上传</text>
</view>
onGetImgClick() {
				uni.chooseImage({
					count: 1, // 最多可选择的图片数量
					sourceType: ['camera'], // 指定源类型为拍照
					success: (res) => {
						// 选择成功,将拍摄的照片路径保存到image中
						this.image = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'https://yyfw.allxiangcun.cn/api/upload-img', // 上传图片的接口地址
							filePath: this.image, // 本地文件路径
							name: 'file', // 上传文件的表单名称
							success: (uploadRes) => {
								// 处理上传成功的逻辑
								const responseData = JSON.parse(uploadRes.data);
								this.uploadinfo = responseData.data
								this.File = false
								// let data = {
								// 	url: this.uploadinfo
								// }
								let data = []
								this.uploadedUrls.push(this.uploadinfo);
								this.uploadUrl = this.uploadedUrls.join(',');

								console.log('uploadUrl:', this.uploadUrl);


							},
							fail: (error) => {
								console.error('上传失败', error);
								// 这里可以根据具体情况处理上传失败的情况,比如展示上传失败的提示信息
							}
						});
					}
				});


},
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Uniapp是一个跨平台的应用开发框架,可以同时开发出安卓、iOS和H5等多个平台的应用。在Uniapp中,我们可以使用一些插件来实现H5手机上传图片视频的功能。 对于图片上传,可以使用uni.uploadFile方法,通过选择图片后,将其以formData的形式上传到后端服务器。代码示例如下: ``` uni.chooseImage({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePaths[0], name: 'file', success: function (res) { console.log('图片上传成功'); }, fail: function (err) { console.error('图片上传失败', err); } }); } }); ``` 而对于视频上传,可以使用uni.chooseVideo方法选择要上传视频文件,然后使用uni.uploadFile方法将其上传到后端服务器。代码示例如下: ``` uni.chooseVideo({ success: function (res) { uni.uploadFile({ url: 'http://example.com/upload', filePath: res.tempFilePath, name: 'file', success: function (res) { console.log('视频上传成功'); }, fail: function (err) { console.error('视频上传失败', err); } }); } }); ``` 需要注意的是,上传文件需要后端服务器的支持,我们需要提前配置好后端接口来处理文件上传的请求。另外,在使用上传功能之前,需要先在uni-app的manifest.json配置文件中,将H5平台的origin字段配置为后端服务器的域名,以防止跨域问题的出现。 总结起来,Uniapp可以通过选择图片和视频文件,再通过uni.uploadFile方法将文件上传到后端服务器,实现H5手机上传图片视频的功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卷起来@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值