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

Question

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

上传身份证正面和反面共用一个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);

没想明白其他的类似这种

是怎么赋值给不同的参数的？

Answer 1

@uploadSuccess="res => uploadSuccess(res, '我是正面')"

Answer 2

<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都要设置的不一样，这样就可以各自接收各自上传之后文件的结果。