【uniapp】uview1.x使用upload上传图片

20 篇文章 0 订阅

和2.x不同的是,要用 action 来配置后端上传图片的接口地址;
再来一些配置项的命名有所不同,一般1.x的命名用 -,2.x的命名使用小驼峰;
1.x 的上传会自带删除时的提示框,2.x 没有;

重要的几个配置项有:

<u-upload 
	:file-list="picList" 
    :action="baseUrl" 
    :before-upload="beforeUpload"
    :before-remove="beforeRemove"
></u-upload>

picList 初始化为一个空数组,是用来保存图片的列表
baseUrl 为后端上传图片的接口
beforeUpload 为图片上传之前的回调
beforeRemove 为图片删除之前的回调

这两个回调函数的参数皆为:indexlist,指当前的图片的下标和已有图片的列表
图片上传:

beforeUpload(index, list) {
      this.picList = []
      // console.log('list',list);
      list.map(async item => {
        this.picList.push({
          url: item.url
        })
        let result = await this.uploadFilePromise(item.url);
        console.log(result);
      })
      console.log('照片列表',this.picList);
    },

// 上传图片
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        uni.uploadFile({
          // 仅为示例,非真实的接口地址
          url: `${BASE_URL}/api/pic/upload`,
          filePath: url,
          name: "file",
          formData: {
            typeEnum: "IMAGE",
          },
          success: (res) => {
            resolve(res.data);
            console.log(res);
          },
        });
      });
    },

照片列表打印结果:
在这里插入图片描述
上传成功的返回结果:
在这里插入图片描述
补充比较常用的:
max-count="9":用来设置最大可上传图片数量
:max-size="5 * 1024 * 1024" :用来单张图片可上传的大小

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花间半盘棋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值