本文详细介绍uni-file-picker组件在UniApp中的应用，涵盖mode网格模式、limit数量限制、file-mediatype类型过滤及file-extname后缀限制。通过auto-upload关闭自动上传并结合ref调用upload方法，实现灵活的上传时机控制，提供单图与多图上传的完整代码案例。
基础用法
设置 mode="grid" 属性，即可启用九宫格样式来展示和选择图片。
通过设置 limit="1"，可以限制用户最多只能选择一张图片。
指定 file-mediatype="image" 属性，可限定组件仅允许选择图片类型的文件。
使用 file-extname='png,jpg' 属性，能够限制仅允许选择后缀名为 png 或 jpg 的图片文件。
将 auto-upload 设置为 "false" 可禁用自动上传功能，转而通过 ref 引用调用 upload 方法来自定义上传时机。需配合 ref="files" 使用，调用方式为 this.$refs.files.upload()。
<uni-file-picker
v-model="imageValue"
file-mediatype="image"
mode="grid"
file-extname="png,jpg"
:limit="1"
@progress="progress"
@success="success"
@fail="fail"
@select="select"
/>
<script>
export default {
data() {
return {
imageValue:[]
}
},
methods:{
// 获取上传状态
select(e){
console.log('选择文件：',e)
},
// 获取上传进度
progress(e){
console.log('上传进度：',e)
},
// 上传成功
success(e){
console.log('上传成功')
},
// 上传失败
fail(e){
console.log('上传失败：',e)
}
}
}
</script>案例一（只上传一张图片）
<template>
<view class="container example">
<uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top">
<uni-forms-item label="图片上传">
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
limit="1"
></uni-file-picker>
</uni-forms-item>
</uni-forms>
</view>
</template>
export default {
data() {
return {
//图片
imageValue:[],
}
},
methods:{
//图片上传
select(e){
const tempFilePaths = e.tempFilePaths;
//获取图片临时路径
const imgUrl=tempFilePaths[0]
uni.uploadFile({
//图片上传地址
url: 'https://xxx.xxx.com/api/uploadpic/',
filePath: imgUrl,
//上传名字，注意与后台接收的参数名一致
name: 'imgUrl',
//设置请求头
header:{"Content-Type": "multipart/form-data"},
//请求成功，后台返回自己服务器上的图片地址
success: (uploadFileRes) => {
console.log('uploadFileRes',JSON.parse(uploadFileRes.data));
//处理数据
const path=JSON.parse(uploadFileRes.data)
//赋值，前端渲染
this.baseFormData.photo=path.imgUrl
}
});
},
}
}图片展示
案例二（上传多张图片）
<template>
<view class="container example">
<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-position="top">
<uni-forms-item label="图片上传">
<uni-file-picker
v-model="imageValue"
fileMediatype="image"
mode="grid"
@select="select"
@delete="delIMG"
limit="9"></uni-file-picker>
</uni-forms-item>
</uni-forms>
</view>
</template>
<script>
export default {
data() {
return {
imgURL:'',
//图片
imageValue:[],
};
},
methods:{
//图片上传
select(e){
const tempFilePaths = e.tempFilePaths;
const imgUrl=tempFilePaths[0]
uni.uploadFile({
url: 'https://xxx.xxx.com/api/uploadpic2/',
filePath: imgUrl,
name: 'imgUrl',
header:{"Content-Type": "multipart/form-data"},
success: (uploadFileRes) => {
console.log('uploadFileRes',JSON.parse(uploadFileRes.data));
let path=JSON.parse(uploadFileRes.data)
//后端返回的地址，存入图片地址
this.imageValue.push({
url:this.imgURL+path.imgUrl,
name:''
})
console.log('imageValue',this.imageValue)
}
});
},
//图片删除
delIMG(e){
console.log('456',e)
const num = this.imageValue.findIndex(v => v.url === e.tempFilePath);
this.imageValue.splice(num, 1);
}
},
onLoad() {
//全局定义的图片访问地址前缀
this.imgURL=this.$imgURL
}
}
</script>到此这篇关于uni-file-picker文件选择上传的文章就介绍到这了,更多相关uni-file-picker文件上传内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！