小程序uView2.X框架upload组件上传方法总结+避坑

呈现效果:

1.1单图片上传

1.2多图片上传

**前言:**相信很多人写小程序会用到uView框架,总体感觉还算OK吧,只能这么说,肯定也会遇到图片视频上传,如果用到这个upload组件相信你,肯定遇到各种各样的问题,这是我个人总结的单图片和多图片上传方法.

uView2.X框架: uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架

单图片上传:

页面结构:

javascript 复制代码
<u-form-item prop="image1" ref="item">
          <view class="img">

            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1"
              uploadIcon="plus" uploadIconColor="#0086ff" ref="upload" width="110" height="110">
            </u-upload>

            <image v-if="!fileList1[0].url" src="../../../static/images/photo.png" mode=""></image>
          </view>
          <view class="text">(*请提供真实头像)</view>
        </u-form-item>

1.首先定义的list 大家不要随便改,就按照官方的

javascript 复制代码
fileList1: [],

name="1" 标识符,

2.分别有上传 删除 几个方法

2.1删除方法

javascript 复制代码
// 图像删除方法
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },

2.2上传之前做的事情,比如 限制格式 限制大小 这点比较麻烦 ,里面注释写的比较详细

javascript 复制代码
// 新增图片 这个是上传图像的方法
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
        let lists = [].concat(event.file)
        // 用于存储符合条件的图片
        let Images = [];
        // 遍历上传的每张图片
        for (let i = 0; i < lists.length; i++) {
          const item = lists[i];
          // 验证图片格式
          const isImage = /\.(png|jpe?g)$/i.test(item.url);
          if (!isImage) {
            uni.showToast({
              title: '只能上传png,jpg,jpeg格式的图片',
              icon: 'none',
              duration: 3000
            });
            // 删除不符合条件的图片
            lists.splice(i, 1);
            // 跳过当前图片,进行下一张图片的验证
            continue;
          }
          // 验证图片大小
          const maxSize = 2 * 1024 * 1024; // 2MB大小限制
          if (item.size > maxSize) {
            uni.showToast({
              title: '图片大小不能超过2MB',
              icon: 'none',
              duration: 3000
            });
            // 删除不符合条件的图片
            lists.splice(i, 1);
            // 跳过当前图片,进行下一张图片的验证
            continue;
          }
          Images.push(item)
        }


        let fileListLen = this[`fileList${event.name}`].length
        Images.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })
        for (let i = 0; i < Images.length; i++) {
          const result = await this.uploadFilePromise(Images[i].url)
          // 返回给后端服务器的 结果需要赋值给 this.infoForm.image = result
          console.log(result, '上传图像result');
          // this.infoForm.avatar = result
          let item = this[`fileList${event.name}`][fileListLen]
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: result.status,
            message: result.status == 'failed' ? '上传失败' : '',
            url: result.url
          }))
          fileListLen++
        }
      },

2.2.1 上传之前做了 格式和大小限制 如果不符合 直接删除

2.3 上传成功的回调 主要是是上传的是一个json格式 一定要进行处理 JSON.parse(res.data).path,

而且这里做了状态判断 会有成功和失败判断 主要是上传失败可以叉掉

和这里进行状态对应处理

比较恶心的时候 不处理一直显示上传中 差不掉

javascript 复制代码
// 回调函数方法
      uploadFilePromise(url) {
        return new Promise((resolve, reject) => {
          let a = uni.uploadFile({
            url: baseUrl + '/admin/upload/targetFile', //后端接口地址
            filePath: url,
            name: 'file', //传给后端参数
            header: {
              'token': uni.getStorageSync('whjk_token')
            },
            formData: {
              path: 'avatar/user'
            },
            success: (res) => {
              console.log(res, 'uploadFilePromise');
              // resolve(JSON.parse(res.data).path)
              if (res.statusCode == 200) { 
                resolve({
                  url: JSON.parse(res.data).path,
                  status: 'success'
                })
              } else {
                resolve({
                  url: url,
                  status: 'failed'
                })
              }
            }
          });
        })
      },

2.3传参说明 参数要 搞正确

javascript 复制代码
         uni.uploadFile({
            url: baseUrl + '/admin/upload/targetFile', // 后端接口地址
            filePath: url,
            name: 'file', //传给后端参数
            header: {
              'token': uni.getStorageSync('whjk_token')
            },
            formData: {
              path: 'avatar/user' // 后端给的路径 看情况而定
            },

多图片上传或者视频上传:

javascript 复制代码
fileList2: [], //  不要随意定义
name = "2"

其实上传方法都一样的 就是属性需要改一下就行 判断都是一样的方法

1.需要修改这个属性

javascript 复制代码
accept="image/*,video/*,.pdf"

2.页面结构

javascript 复制代码
<u-form-item prop="annexPhoto" ref="item1">
          <view class="common">
            <text class="tex">展示附件</text>
            <text class="ext">(最多6个,仅支持png,jpg,jpeg格式上传)</text>
          </view>
          <view class="upload">
            <u-upload :fileList="fileList2" @afterRead="imageOrVideoOrPdf" @delete="deletePicPdf" name="2" multiple
               accept="image/*,video/*,.pdf"
              :maxCount="6" uploadIcon="plus" uploadIconColor="#0086ff" :deletable="true">
            </u-upload>
          </view>
        </u-form-item>

3.上传前限制 大小 图片 格式 里面注释写的很详细

javascript 复制代码
// 视频image和pdf方法
      async imageOrVideoOrPdf(event) {
        console.log(event);
        // 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
        let lists = [].concat(event.file);
        // 用于存储符合条件的图片
        let validImages = [];
        // 遍历上传的每张图片
        for (let i = 0; i < lists.length; i++) {
          const item = lists[i];
          // 验证图片格式
          const isImage = /\.(png|jpe?g)$/i.test(item.url);
          if (!isImage) {
            uni.showToast({
              title: '只能上传png,jpg,jpeg格式的图片!',
              icon: 'none',
              duration: 5000
            });
            // 删除不符合条件的图片
            lists.splice(i, 1);
            // 跳过当前图片,进行下一张图片的验证
            continue;
          }
          // 验证图片大小
          const maxSize = 2 * 1024 * 1024; // 2MB大小限制
          if (item.size > maxSize) {
            uni.showToast({
              title: '图片大小不能超过2MB!',
              icon: 'none',
              duration: 5000
            });
            // 删除不符合条件的图片
            lists.splice(i, 1);
            // 跳过当前图片,进行下一张图片的验证
            continue;
          }
          // 符合条件的图片添加到validImages数组中
          validImages.push(item);
        }

        let fileListLen = this[`fileList${event.name}`].length;
        validImages.map((item) => {
          this[`fileList${event.name}`].push({
            ...item,
            status: 'uploading',
            message: '上传中'
          })
        })

        for (let i = 0; i < validImages.length; i++) {
          const result = await this.uploadFileOrPdf(validImages[i].url);
          console.log(result);
          // 返回给后端服务器的结果需要赋值给 this.infoForm.annex = result
          let item = this[`fileList${event.name}`][fileListLen];
          // console.log(fileListLen);
          this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
            status: result.status,
            message: result.status == 'failed' ? '上传失败' : '',
            url: result
          }));
          console.log(result, 'result');
          if (result.status == 'success') {
            this.imgarr.push(result);
            console.log(this.imgarr,'imgarr');
          }
          fileListLen++;
        }
        // 将上传成功的url数组一起提交给后端
        // this.infoForm.annex = urls
      },

4.上传成功回调 注释的地方有写 可以上传 pdf 视频 图片 改一下path路径就行

javascript 复制代码
// 视频image和pdf方法回调函数
      uploadFileOrPdf(url) {
        // let uploadedFilePaths = [];
        return new Promise((resolve, reject) => {
          // let path;
          // const fileExtension = url.split('.').pop().toLowerCase();
          // if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
          //   path = 'annex/image'; // 图片路径
          // } else if (fileExtension === 'pdf') {
          //   path = 'annex/pdf'; // PDF路径
          // } else {
          //   reject('Invalid file type');
          //   return;
          // }
          uni.uploadFile({
            url: baseUrl + '/admin/upload/targetFile', //后端接口地址
            filePath: url,
            name: 'file', //传给后端参数
            header: {
              'token': uni.getStorageSync('whjk_token')
            },
            formData: {
              path: 'annex/image' // 根据文件后缀类型设置路径
            },
            success: (res) => {
              console.log(res);
              // resolve(JSON.parse(res.data).path)
              if (res.statusCode == 200) {
                resolve({
                  url: JSON.parse(res.data).path,
                  status: 'success'
                })
              } else {
                resolve({
                  url: url,
                  status: 'failed'
                })
              }
            },
            fail: (err) => {
              // console.log(err,'err');
              reject(err);
            }

          });
        })
      },

5.删除方法

javascript 复制代码
 // 图像删除方法
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },

6.最终呈现的效果就是这样

相关推荐
尘浮生1 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen4 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘8 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡10 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼14 小时前
微信小程序-prettier 格式化
微信小程序·小程序
wqq_99225027716 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji2 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收