更新记录
1.0.0(2024-06-06)
下载此版本
1.0.0
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
√ |
√ |
√ |
× |
√ |
√ |
√ |
yang-ImageUploader
属性参数
| | HTML | - | 插槽,可以自定义内容|
事件方法
使用方法示例
在template中使用
<template>
<view class="content">
<yang-ImageUploader
:multiple="true"
:max-files="3"
@file-selected="onFileSelected"
@remove-image="removeImage"
:selectedImages = selectedImagesFromFather
@selectImg="handLeSelectImg"
:showOperation="showOperation"
>
</yang-ImageUploader>
</view>
</template>
<script>
export default {
data() {
return {
uploadUrl: '', // 上传地址
uploadedUrlList:[], // 上传之后获取的图片地址
selectedImagesFromFather: [],
showOperation:true
}
},
methods: {
beforeUpload(event) {
return new Promise((resolve, reject) => {
resolve();
});
},
onFileSelected(selectedFiles) {
// Handle selected files here in the parent component
console.log('Selected Files:', selectedFiles);
// do somthing after choose
uni.uploadFile({
name: 'file',
url: this.uploadUrl,
filePath: selectedFiles.tempPath,
formData: {},
success: (uploadRes) => {
console.log('=============>99999999999', uploadRes)
let uploadObj = JSON.parse(uploadRes.data);
if ( uploadObj.code== 200) {
this.uploadedUrlList.push({
"imagePath": uploadObj.data
})
}
},
fail: (error) => {
console.log('上传失败', error);
}
})
},
removeImage(index) {
this.uploadedUrlList.map((item, key) => {
if (index === key) {
this.uploadedUrlList.splice(key, 1);
}
})
},
handLeSelectImg(tempFilePaths) {
this.selectedImagesFromFather = this.selectedImagesFromFather.concat(tempFilePaths);
},
}
}
</script>