【uniApp】uni-file-picker 实现文件上传

// templete
<uni-file-picker v-model="fileList" :limit="1" file-mediatype="image" :sourceType="['album', 'camera']" :image-styles="imageStyle" @select="uploadFile" ></uni-file-picker>
export default {
	data() {
		fileList: [],
		imageStyle: {
			"height": 120,	// 边框高度
			"width": 120,	// 边框宽度
			"border":{ // 如果为 Boolean 值,可以控制边框显示与否
				"color":"#eee",		// 边框颜色
				"width":"1px",		// 边框宽度
				"style":"solid" 	// 边框样式
			}
		}
	},
	methods: {
		uploadFile(e){
			this.fileList.push(e.tempFiles[0])
			uni.uploadFile({
			 	url: '/addFile', // 替换为你的上传API地址
		 	   filePath: e.tempFilePaths[0], // 附件路径
			   name: 'file',
			   formData: {}, // 可加入表单内其他参数
			   success: (res) => { //成功回调
			    const result = JSON.parse(res.data) // 成功回调返回结果
			   },
			   fail: (error) => { //失败回调
			   	console.log(error)
			   }		
			})
		}
	}
}

在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniappuni-file-picker组件可以实现在真机上上传图片的功能。你可以按照以下步骤来实现: 1. 在uniapp项目中引入uni-file-picker组件。可以通过npm安装或者直接下载组件文件。 2. 在需要使用图片上传功能的页面中,使用uni-file-picker组件,并设置相应的属性和事件。 3. 在uni-file-picker组件的属性中,设置上传的接口地址、上传的文件类型、最大上传数量等。 4. 在uni-file-picker组件的事件中,监听上传成功和上传失败的回调函数。 5. 在上传成功的回调函数中,可以处理上传成功后的逻辑,比如将上传成功的图片显示在页面上。 6. 在上传失败的回调函数中,可以处理上传失败后的逻辑,比如提示用户上传失败的信息。 以下是一个示例代码: ```html <template> <view> <uni-file-picker :url="uploadUrl" :file-type="fileType" :max-count="maxCount" @success="uploadSuccess" @fail="uploadFail" ></uni-file-picker> </view> </template> <script> export default { data() { return { uploadUrl: 'http://your-upload-api-url', // 上传接口地址 fileType: 'image', // 上传文件类型 maxCount: 5 // 最大上传数量 } }, methods: { uploadSuccess(res) { // 上传成功的回调函数 console.log('上传成功', res) // 处理上传成功后的逻辑,比如将上传成功的图片显示在页面上 }, uploadFail(res) { // 上传失败的回调函数 console.log('上传失败', res) // 处理上传失败后的逻辑,比如提示用户上传失败的信息 } } } </script> ``` 请注意,以上代码仅为示例,具体的接口地址、文件类型和最大上传数量需要根据实际情况进行设置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值