uni-file-picker组件的使用——小程序上传图片(多张/一张)

小程序 0

上传多张图片(对接过后端接口):

<uni-file-picker ref="filePicker" limit="9" :value="fileList.url" title="最多上传9张" :image-styles="imageStyles"        :sourceType="sourceType" @select="select" @progress="progress" @success="success" @fail="fail"        @delete="deletea" />// 图片回显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();

上传一张图片(未对接后端接口):

主要修改位置如下:

<uni-file-picker ref="filePicker" limit="1" :value="fileList.url" title="上传1张" :image-styles="imageStyles"            :sourceType="sourceType" @select="select" @progress="progress" @success="success" @fail="fail"            @delete="deletea" />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);  },

也许您对下面的内容还感兴趣: