uniapp uview文件上传的文件不是文件流,该如何处理?用了uni.chooseImage预览功能要如何做

在使用uniapp开发,运用的ui是用uview,这边需要做一个身份认证,如下图

使用的是uview的u-upload组件,可是这个组件传给后端的不是文件流

后端接口需要的是文件流格式,后面使用了uniapp的选择图片或者拍照的api,api地址

复制代码
uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          console.log('res',res)
        },
      });


uview的是返回的文件信息是对象格式,uni.chooseImage返回的是文件流格式

下面我们来解决预览问题,把uview的u-upload组件跟uni.api合着用,代码如下

复制代码
// 选择图片方法
onDiscernHandle() {
      if (this.fileList.length !== 0) {
        return false;
      }
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
        sourceType: ['camera', 'album'], //从相册选择
        success: (res) => {
          this.fileList.push({
            url: res.tempFiles[0].path,
            file: res.tempFiles[0],
          });
        },
      });
    },
// 删除图片
    deletePic(event) {
      this.fileList = [];
    },

<view class="page-container1-face-image" @click="onDiscernHandle">
          <u-upload
            :fileList="fileList"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="1"
            accept="image"
            :capture="['camera']"
            class="operate-upload"
            :previewFullImage="true"
            :disabled="true"
          >
            <u--image
              :showLoading="true"
              :src="imgs.square"
              width="250rpx"
              height="250rpx"
            ></u--image>
          </u-upload>
        </view>
相关推荐
英俊潇洒美少年5 小时前
Vue 生产环境打包:SourceMap、压缩、混淆、加密全解 + 最佳实践
前端·javascript·vue.js
巴博尔5 小时前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
猫头虎-前端技术6 小时前
JS 作用域与闭包:从变量提升到闭包陷阱的超详细解析
开发语言·javascript·云计算·bootstrap·ecmascript·openstack·perl
她说人狗殊途7 小时前
基于 vue-cli 创建
前端·javascript·vue.js
AZaLEan__8 小时前
前端移动端适配与 Bootstrap
前端·bootstrap·html
大家的林语冰8 小时前
Deno 2.8 正式发布,再次超越 Bun,史上最大的次版本升级诞生!
前端·javascript·node.js
渣渣xiong9 小时前
从零开始:前端转型AI agent直到就业第五十七天-第五十八天
前端·人工智能·python
影寂ldy9 小时前
C#数组的属性和方法(Clear / Copy / IndexOf )
开发语言·javascript·c#
Brave & Real9 小时前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
AI周红伟9 小时前
周红伟:长鑫科技(CXMT)财务全景分析
前端·chrome·科技