uniapp 基于uview2使用upload手动上传多图

      <view>
        <view class="from-detail-title">上传图片</view>
        <view>
          <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="9" :auto-upload="false"></u-upload>
        </view>
      </view>
  data() {
    return {
      fileList1: [],
    };
  },
  
  methods:{
      // 新增图片
    async afterRead(event) {
      const lists = Array.isArray(event.file) ? event.file : [event.file];
      lists.forEach((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "pending", // 更改为 pending 或其他表示等待上传的状态
          message: ""
        });
      });
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url:"你的上传接口", // 你的上传接口
          filePath: url,
 
          name: "file",
          header: {
            WapAuthor: "WapBearer " + getToken()
          },
          success: (res) => {
            // resolve(res.data.data);
            let data = JSON.parse(res.data); //最终传给的是字符串,这里需要转换格式
            if (data.code != 200) {
              this.$modal.showToast(data.msg);
            }
            resolve(data.fileName);
          },
          fail: (err) => {
            uni.showToast({
              title: "发送失败",
              icon: "none"
            });
            reject();
          }
        });
      });
    },
    async uploadImgs() {
        const updatedFiles = await Promise.all(
          this.fileList1.map(async (file, index) => {
            try {
              const result = await this.uploadFilePromise(file.url);
              return {
                ...file,
                status: "success",
                message: "",
                url: result
              };
            } catch (err) {
              uni.showToast({
                title: `${file.name} 上传的图片失败。请稍后再试。`,
                icon: "none",
                duration: 2000
              });
              return {
                ...file,
                status: "failed",
                message: err.message || "上传失败"
              };
            }
          })
        );
        // 更新 fileList1
        this.fileList1 = updatedFiles;
        //发送请求 代码

      }
    },
 }

使用uniapp结合uView进行拍照上传图片的过程中,可以通过以下步骤实现: 1. 在模板中设置一个按钮,用于触发拍照事件: ``` <view class="u-upload" @click="takePhoto"> <u-icon class="u-icon-upload" name="camerafill"></u-icon> </view> ``` 2. 在methods中实现takePhoto方法,用于触发拍照事件: ``` takePhoto() { const camera = uni.chooseImage({ count: 1, // 一次只能拍摄一张照片 sourceType: ['camera'], // 指定拍照来源为相机 success: (res) => { // 上传图片 this.uploadImage(res.tempFilePaths[0]); }, fail: (err) => { uni.showToast({ icon: 'none', title: '拍照失败' }); console.error(err); } }); }, ``` 3. 在uploadImage方法中,使用uni.uploadFile方法上传图片,并在success回调函数中获取上传后的图片地址: ``` uploadImage(filePath) { const upload = uni.uploadFile({ url: 'your-upload-api', // 上传图片的接口地址 filePath: filePath, name: 'file', // 上传图片时的参数名 success: (res) => { const imageUrl = JSON.parse(res.data).data.url; // 解析上传后的图片地址 // 将图片地址赋值给data中的imageUrl变量 this.imageUrl = imageUrl; }, fail: (err) => { uni.showToast({ icon: 'none', title: '上传失败' }); console.error(err); } }); }, ``` 4. 最后将生成的图片地址赋值给data中的imageUrl变量即可: ``` data() { return { imageUrl: '' }; } ``` 以上步骤适用于在H5端使用uniapp结合uView进行拍照上传图片,希望能够帮助到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值