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

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

上传身份证正面和反面共用一个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="https://segmentfault.com/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="https://segmentfault.com/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);

没想明白其他的类似这种
图片分组上传将返回值赋值给不同的参数?
是怎么赋值给不同的参数的？

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

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

回答

以上是 图片分组上传将返回值赋值给不同的参数? 的全部内容， 来源链接： utcz.com/a/110830.html

回到顶部