问答

图片分组上传将返回值赋值给不同的参数?

作者:admin 2021-05-05 我要评论

上传身份证正反面共用的一个图片上传组件, 怎么将不同的返回值赋给不同的参数. 举个例子: 上传身份证正面和反面共用一个upload组件: uImg ref="upimg" :uploadFi...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

上传身份证正反面共用的一个图片上传组件, 怎么将不同的返回值赋给不同的参数. 举个例子:

上传身份证正面和反面共用一个upload组件:

<uImg
    ref="upimg"
    :uploadFileUrl="uploadFileUrl" 
    :header="header" 
    :fileKeyName="name"
    :imgUrl.sync="imgUrl"
    @uploadSuccess="uploadSuccess"
></uImg>

正面上传成功后将res.url赋值给需要提交到后台的身份证正面的参数zm, 在uploadSuccess

uploadSuccess(res) {
  this.zm = res.url
}

反面成功后将res.url赋值给fm:

uploadSuccess(res) {
  this.fm = res.url
}

由于上传成功回调都是uploadSuccess, 所以在uploadSuccess中只可能赋给一个参数.

现在我想正面上传成功后在uploadSuccess中将this.zm = res.url, 反面上传成功后在uploadSuccess中将this.fm = res.url

上传组件
<view class="market-title">
            <view class="title-text">
                <text class="text">身份证照</text>
            </view>
            <view class="upload-box">
                <view class="upload">
                    <uImg
                        ref="upimg"
                        :uploadFileUrl="uploadFileUrl" 
                        :header="header" 
                        :fileKeyName="name"
                        :imgUrl.sync="imgUrl"
                        @uploadSuccess="uploadSuccess"
                    ></uImg>
                </view>
                <view class="example">
                    <image class="example-img" src="../../static/img/banner3.jpg" mode="aspectFill"></image>
                    <view class="example-shadow">
                        <text class="img-text">身份证正面(示例)</text>
                    </view>
                </view>
            </view>
            <view class="upload-box">
                <view class="upload">
                    <uImg
                        ref="upimg"
                        :uploadFileUrl="uploadFileUrl" 
                        :header="header" 
                        :fileKeyName="name"
                        :imgUrl.sync="imgUrl"
                        @uploadSuccess="uploadSuccess"
                    ></uImg>
                </view>
                <view class="example">
                    <image class="example-img" src="../../static/img/banner3.jpg" mode="aspectFill"></image>
                    <view class="example-shadow">
                        <text class="img-text">身份证国徽面(示例)</text>
                    </view>
                </view>
            </view>
回调
uploadSuccess(result) {
    if(result.statusCode == 200) {
        //上传成功的回调处理
        console.log(result, params)
        toast('上传成功')
    }else{
        toast('上传失败')
    }
},
//上传方法的调用
upFile(){
    this.$refs.upimg.upload()
},

this.$emit('uploadSuccess', res);

没想明白其他的类似这种
image
是怎么赋值给不同的参数的?

###
@uploadSuccess="res => uploadSuccess(res, '我是正面')"
###
<uImg
                        ref="upimg"
                        :uploadFileUrl="uploadFileUrl" 
                        :header="header" 
                        :fileKeyName="name"
                        :imgUrl.sync="imgUrl"
                        @uploadSuccess="uploadSuccess"
                    ></uImg>

这个看起来像是自定义的upload组件,既然是自定义,并且采用了这么多变量uploadFileUrl,fileKeyName和imgUrl,但感觉后面一个都没有用上,是不是有相应的代码没有传上去?

先说说我的思路。
想实现你的想法,那么就需要把uploadFileUrl,fileKeyName和imgUrl这些变量用上。

uploadSuccess(refsName,result) {
    if(result.statusCode == 200) {
        //上传成功的回调处理
        console.log(result, params)
        toast('上传成功')
        this.$refs.refsName.fileKeyName = res.file.name
        this.$refs.refsName.imgUrl = res.url
    }else{
        toast('上传失败')
    }
},

经过上面的修改之后,对应的html也应该修改。把uImg标签中的ref、uploadFileUrl、fileKeyName和imgUrl都要设置的不一样,这样就可以各自接收各自上传之后文件的结果。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 图片分组上传将返回值赋值给不同的参数

    图片分组上传将返回值赋值给不同的参数

  • vue3 composition-api和vue-class-comp

    vue3 composition-api和vue-class-comp

  • v-for ESLint一直提示有问题不给过?

    v-for ESLint一直提示有问题不给过?

  • java 服务程序

    java 服务程序

腾讯云代理商
海外云服务器