行业知识
uni-file-picker组件的使用——小程序上传图片(多张\一张)
2026-11-09 04:31:26
来源:互联网转载
上传多张图片(对接过后端接口):
// 图片回显fileList: [],// 上传图片的样式imageStyles: { width: 90, height: 90,},// uni.chooseImage值,从相册选择,拍摄sourceType: ['album', 'camera'],// 获取上传状态select(e) { // 获取本地存储中的认证令牌 const accessToken = uni.getStorageSync('accessToken'); console.log('选择文件:', e) // 解决file对象取值问题 // 微信小程序上传-需要微信临时提供临时地址 const tempFilePaths = e.tempFilePaths; // 处理每张选中的图片 tempFilePaths.forEach(tempFilePath => { uni.uploadFile({ url: apiBaseUrl + '/image/importPhoto', filePath: tempFilePath, // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 name: 'fileList', header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` }, // 成功函数 success: (res) => { console.log('上传成功', res.data); // uni.uploadFile返回来的结果默认是JSON格式字符串,需要用JSON.parse转换成js对象 console.log('上传数据转换', JSON.parse(res.data)); let uploaddata = JSON.parse(res.data) let x = {} // 下面3个值是uni-app规定的一个不能少 x.url = uploaddata.message x.extname = '' x.name = '' this.fileList.push(x) }, // 失败提示用户重新上传 fail: error => { console.log('失败', error); } }) }); }, // 获取上传进度 progress(e) { // 没有上传空间,不会执行 console.log('上传进度:', e) }, // 上传成功 success(e) { // 没有上传空间,不会执行 console.log('上传成功') }, // 上传失败 fail(e) { // 没有上传空间,不会执行 console.log('上传失败:', e) }, // 删除 deletea(e) { console.log('删除图片', e); },//在需要清空上传过的照片函数里调用this.$refs.filePicker.clearFiles(); 上传一张图片(未对接后端接口):
主要修改位置如下:
activeColor: '#5098FF',sourceType: ['album', 'camera'],// uni.chooseImage值,从相册选择,拍摄// 获取上传状态select(e) { // 获取本地存储中的认证令牌 const accessToken = uni.getStorageSync('accessToken'); console.log('选择文件:', e) // 解决file对象取值问题 // 微信小程序上传-需要微信临时提供临时地址 const tempFilePath = e.tempFilePaths[0]; // 获取第一张选中的图片 uni.uploadFile({ url: apiBaseUrl + '/image/importPhoto', filePath: tempFilePath, // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容 name: 'fileList', header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${accessToken}` }, // 成功函数 success: (res) => { console.log('上传成功', res.data); // uni.uploadFile返回来的结果默认是JSON格式字符串,需要用JSON.parse转换成js对象 console.log('上传数据转换', JSON.parse(res.data)); let uploaddata = JSON.parse(res.data) let x = {} // 下面3个值是uni-app规定的一个不能少 x.url = uploaddata.message x.extname = '' x.name = '' this.fileList = [x]; // 仅保留一张上传的图片 }, // 失败提示用户重新上传 fail: error => { console.log('失败', error); } }); }, // 获取上传进度 progress(e) { // 没有上传空间,不会执行 console.log('上传进度:', e) }, // 上传成功 success(e) { // 没有上传空间,不会执行 console.log('上传成功') }, // 上传失败 fail(e) { // 没有上传空间,不会执行 console.log('上传失败:', e) }, // 删除 deletea(e) { console.log('删除图片', e); },
上一篇:服务器坏了怎么处理?