uni-file-picker组件的使用——小程序上传图片（多张\一张）

上传多张图片（对接过后端接口）：

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

原文地址：https://blog.csdn.net/qq_53857666/article/details/134315240

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！