封装upload组件是为了多页面复用同个封装后的组件,在调用组件时只需传所需的参数即可,避免多个页面重复写多个upload标签,从而减少页面代码的冗杂度,提升代码质量。
<template>
<!--
1、afterRead 读取后的处理函数
2、deletePic 预览图片删除
3、maxCount 运行选择图片数量
4、name 标识符 可以在回调函数的第二项参数中获取
5、multiple 是否开启图片多选
-->
<view class="upload_img">
<u-upload :fileList="fileList" @oversize="oversize" @afterRead="afterRead" @delete="deletePic" name="1" multiple
:maxCount="maxCount" :width="width" :height="height">
<u-image :showLoading="true" :src="newurl" mode="aspectFill" :width="imageWidth" :height="imageHeight">
</u-image>
</u-upload>
</view>
</template>
<script>
export default {
data() {
return {
// 默认允许上传一张图片
maxCount: '1',
newurl: ''
};
},
props: {
// 存储本地图片数据
fileList: {
type: Array,
default: []
},
// 是否开启多选图片
multiple: {
type: Boolean,
default: false
},
imgurl: {
type: String,
default: ''
},
src: {
type: String,
default: ''
},
width: {
type: String,
default: '80' || ''
},
height: {
type: String,
default: '80' || ''
},
imageWidth: {
type: String,
default: '80' || ''
},
imageHeight: {
type: String,
default: '80' || ''
},
},
watch: {
imgurl(newval, oldval) {
this.newurl = newval;
}
},
methods: {
// 限制上传图片上传大小方法
oversize(e) {
this.$emit(e, 'over-size');
},
// 执行读取图片后的处理函数方法
afterRead(e) {
let data = e;
this.newurl = e.file[0].url;
this.$emit('after-Read', data);
},
// 删除选择预览上传图片方法
deletePic(e) {
this.$emit(e, 'del-Pic');
}
}
};
</script>