uniapp 实现 uni-file-picker 效果

模板

bash 复制代码

<uni-forms-item label="营业执照" required name="xkz_pic">
			<view class="example-body">
				<uni-file-picker 
				    v-model="fileLists" 
					file-mediatype="image" 
					file-extname="png,jpg,jpeg"
					:image-styles="imageStyles"
					:limit="1"
					title="上传营业执照,图片大小不超过2M的文件"
					@select="uploadSelect" 
					@success="uploadSuccess"
					@fail="uploadFail" 
					@delete="uploadDel"
				>
				</uni-file-picker>
			</view>

			
</uni-forms-item>

javascript

bash 复制代码

//更新营业执照，必须使用computed，如果使用接口返回的图片地址，图片不会渲染
const fileLists=computed({
	//取值
	get(){
		
		let list = [];
		let url=baseurl+dataFormAdd.xkz_pic
		let extname=url.substring(url.lastIndexOf(".")+1)
		let item={
				url: url,
				extname: extname,
				name: 'yyzz'+extname
			
		}
		if(dataFormAdd.xkz_pic){
			list.push(item)
		}
		
		return list
	},
	
	//设置值
	set(value){
		console.log('设置值',value)
		console.log(value.length)
		if(value.length==0){
			dataFormAdd.xkz_pic=''
		}
	}

})
//核心代码，选择图片

const uploadSelect=(e)=>{
	console.log('选择图片',e)
	//#ifdef H5
	// h5上传-需要文件file对象
	const tempFilePaths = e.tempFiles[0].file;
	//#endif
	//#ifdef MP-WEIXIN
	// 微信小程序上传-需要微信临时提供临时地址
	const tempFilePaths = e.tempFilePaths;
	//#endif

	console.log('临时路径',tempFilePaths[0],uploadPicAction)
	//上传文件
	uni.uploadFile({
	                    
						//#ifdef H5
						url:uploadPicAction,
						//#endif
						//#ifdef MP-WEIXIN
						url: 'http://www.baidu.cn/upload/uploadimage',
						//#endif
	                    // 要上传文件对象-h5和微信小程序上传参数不一样只能存在一个
	                    // H5上传
						//#ifdef H5
						 file: tempFilePaths,
						//#endif
						
						//#ifdef MP-WEIXIN
						// 微信小程序上传
						filePath: tempFilePaths[0],
						//#endif
	                    //文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
	                    name: 'file',
	                    // 请求头设置
	                    // 我们是需要token和用户id登录时存从uni-app数据存储中取
	                    // header: {
	                    //     "token": uni.getStorageSync('token'),
	                    //     "tenant-id": uni.getStorageSync('tenant-id')
	                    // },
	                    // 成功函数
	                    success: (res) => {
	                        // uni.uploadFile默认在外面包了一层data
	                        console.log('上传成功', res.data);
							// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
	                        console.log('上传数据转换',JSON.parse(res.data));
	                        // 取到文档服务器的值
	                        let uploaddata = JSON.parse(res.data)
							let url=uploaddata.data.url
	                        let x = {}
	                        // 下面3个值是uni-app规定的一个不能少
	                        x.url = url
	                        x.extname = url.substring(url.lastIndexOf(".")+1)
	                        x.name = '营业执照'
							dataFormAdd.xkz_pic=url
	                        //fileLists.value.push(x)
							//fileLists.push(x)
							//fileLists.value=x
							//console.log('文件列表',fileLists.value, x,dataFormAdd)
							
	                    },
	                    // 失败提示用户重新上传
	                    fail: error => {
	                        console.log('失败', error);
	                    }
	                })
	

	
}
//删除图片

const uploadDel=(e)=>{

	console.log('删除图片',e)
	//dataFormAdd.xkz_pic=''
}


//上传成功
const uploadSuccess=(e)=>{
	//没有uniCloud上传空间，不会触发，当时这个地方困扰了好久，所以没有上传空间，只能通过uploadSelect来实现上传控制
	
	console.log('上传成功',e)
}

//上传失败
const uploadFail=(e)=>{
	//没有uniCloud上传空间，不会触发
	console.log('上传失败',e)
}