【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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值