小工具知识网

当前位置: 首页 > 行业知识 > uni-file-picker组件的使用——小程序上传图片(多张\一张)

行业知识

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);  },

上一篇:服务器坏了怎么处理?

下一篇:基于YOLOv的目标追踪与无人机前端查看系统开发