vue封装iview upload图片上传组件
1：文件流的形式
<template>
<div>
<div v-for="(item, index) in uploadList" :key="index" :class="uploadObj.uploadClass ? 'ty-bank-upload-list_' : 'ty-bank-upload-list-change'">
<template>
<img :src="baseUpload + item">
<div class="ty-bank-upload-list-cover">
<Icon class="ty-delete-icon" type="ios-trash-outline" @click.native="handleRemove(item, index)"></Icon>
</div>
</template>
<!-- <template>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template> -->
</div>
<Upload
ref="handleLoad"
:show-upload-list="false"
:multiple = "uploadObj.multiple"
:format="['jpg', 'jpeg', 'png']"
:max-size="2048"
:on-success="handleSuccess"
:on-format-error="handleFormatError"
:on-exceeded-size="handleMaxSize"
:before-upload="handleBeforeUpload"
:on-progress="handleProcessUpload"
type="select"
:action="handleSuccessUrl"
:data="handleSuccessData"
:name="images"
style="display: inline-block; width:58px;">
<div v-if="uploadList.length < uploadObj.length" :class="uploadObj.uploadClass ? 'ty-upload-img' : 'ty-upload-img-change'">
<Icon type="ios-image-outline" :size="uploadObj.size" style="line-height: 100px"></Icon>
</div>
</Upload>
</div>
</template>
<script>
export default {
data () {
return {
baseUpload: process.env.API_DOMAIN,
imgName: '',
visible: false,
uploadFileNameArr: [], // 上传文件名
handleSuccessUrl: process.env.API_DOMAIN + '/data/v1/imagesFileUpload',
uploadList: [], // 文件列表
handleSuccessData: {
handler: 'Image'
},
images: 'images',
}
},
// 接收父组件传递过来的信息（通信）
props: {
// upload 动态
uploadObj: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function () { // 默认参数
return {
multiple: false, // 是否开启多图
length: 5, // 图片个数
size: 80, // 大小
uploadClass: true, // 控制动态样式
uploadList: [],
}
}
},
},
watch: {
'uploadObj.uploadList' (val) {
this.uploadList = val;
}
},
computed: {
},
created () {
},
mounted () {
},
methods: {
handleView (name) {
this.imgName = name;
this.visible = true;
},
handleRemove (file, index) {
this.uploadList.splice(index, 1)
this.$emit('toParent', this.uploadList);
},
handleSuccess (res, file) {
// 因为上传过程为实例，这里模拟添加 url
if (res.code === 200) {
// 子 ==> 父 组件通信
this.uploadList.push(res.data.img_path_0)
this.$emit('toParent', this.uploadList);
}
},
handleFormatError (file) {
this.$Notice.warning({
title: '文件格式不正确',
desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg jpeg 或 png 格式的图片。'
});
},
handleMaxSize (file) {
this.$Notice.warning({
title: '超出文件大小限制',
desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
});
},
handleBeforeUpload (file) {
const check = this.uploadList.length < this.uploadObj.length;
if (!check) {
this.$Notice.warning({
title: '最多只能上传 5 张图片。'
});
}
return check;
},
handleProcessUpload (file) {
}
}
}
</script>
<style lang='less' type='text/less'>
</style>
上面的方法每选一张就上传一次图片，这种方式并不好
上面的方法每选一张就上传一次图片，这种方式并不好
2：bse64 的方式，点提交再上传
// 上传之前返回false
handleBeforeUpload (file) {
console.log('handleBeforeUpload ===> ', file);
this.validImage(file);
return false;
},
// ============================ 自定义方法 base64 ============================
// 图片校验
validImage (file) {
// 图片大小长度动态
// var obj = {
// length: 1, // 允许上传多少张图片
// size: 2097152, // 单张图片大小 B
// width: '',
// height: ''
// }
if (this.baseUploadArr.length < 3) {
if (file.size > 2097152) { // 单位 B
this.$Message.error(file.name + '大小超过2M')
this.file = null
return false;
} else if (!/image\/\w+/.test(file.type)) {
this.$Message.error('请上传以jpg、jpeg、png结尾的图片文件'); // FileExt.toLowerCase()
this.file = null
return false;
}
this.base64Image(file);
} else {
this.$Message.warning('只能上传3张图片!')
return false;
}
},
// 转 base 64
base64Image (file) {
let reader = new FileReader();
reader.onload = (e) => {
this.baseUploadArr.push(e.target.result) // 将 base64 编码存储到路径数组中
}
reader.readAsDataURL(file)
console.log('this.baseUploadArr ==> ', this.baseUploadArr)
},
posted on 2019-11-07 10:21 youaremysunshine 阅读(2683) 评论(0) 编辑 收藏 举报
