<template>
<div class="uploader-container">
<div class="demo-upload-list" v-for="(item, index) in uploadList" :key="index">
<template v-if="item.status === 'finished'">
<img :src="item.url" />
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.url)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
<Upload
v-show="uploadList.length < maxNum"
ref="upload"
style="display: inline-block;width:100px;"
:default-file-list="defaultFileList"
:multiple="true"
accept="image/*"
:format="['jpg', 'png', 'jpeg']"
:show-upload-list="false"
type="drag"
:max-size="1024"
:action="uploadUrl"
:name="fileFieldName"
:data="extraParams"
:before-upload="handleBeforeUpload"
:on-format-error="handleFormatError"
:on-success="handleSuccess"
:on-error="handleError"
:on-exceeded-size="exceededSize"
>
<div style="width: 100px;height:100px;line-height: 100px;">
<Icon type="ios-cloud-upload" size="20"></Icon>
</div>
</Upload>
<Modal :title="$t('passenger.look_img')" v-model="visible">
<img :src="imgName" v-if="visible" style="width: 100%" />
</Modal>
</div>
</template>
<script>
import randomize from 'randomatic';
import { getOssSignature } from 'api/oss';
export default {
props: {
maxNum: {
default: 5,
type: Number,
},
defaultList: {
// 默认文件列表
default: function() {
return [];
},
type: Array,
},
},
data() {
return {
uploadUrl: this.$https
? 'https://ss.ss-cn-hangzhou.aliyuncs.com'
: 'http://ss.cn-hangzhou.aliyuncs.com',
uploadList: [],
defaultFileList: [],
tmpUploadFile: {},
fileNum: 0,
fileFieldName: 'file',
extraParams: {
key: '',
policy: '',
OSSAccessKeyId: '',
success_action_status: 200,
callback: '',
signature: '',
},
imgName: '',
visible: false,
uidList: {},
};
},
watch: {
defaultList(newVal) {
this.defaultFileList = newVal;
this.uploadList = newVal;
this.uploadList.map(item => {
this.uidList[item.name] = {
filename: item.name,
filetype: 'png',
fileurl: item.url,
suffix: 'png',
status: 'finished',
};
});
this.fileNum += this.defaultList.length;
},
},
computed: {
uploadFile: {
get() {
return this.initSingleFile;
},
set(file) {
this.initSingleFile = file;
},
},
},
mounted() {
this.uploadList = this.$refs.upload.fileList;
this.uploadList.map(item => {
this.uidList[item.name] = {
filename: item.name,
filetype: 'png',
fileurl: item.url,
suffix: 'png',
};
});
},
methods: {
exceededSize(file) {
this.fileNum--;
this.$Message.error(this.$t('passenger.img_size'));
},
handleView(name) {
this.imgName = name;
this.visible = true;
},
handleRemove(file) {
const fileList = this.$refs.upload.fileList;
this.uploadList = fileList;
// console.log('this.uploadList,fileList=====', this.uploadList, fileList);
this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
let cpFileList = fileList.map(file => this.uidList[`${file.name}`]);
this.$emit('file-remove', {
fileList: cpFileList,
});
this.fileNum--;
},
handleBeforeUpload(file) {
const check = this.fileNum < this.maxNum;
// 用自己定义的 fileNum 计数,beforeUpload 加1
// 别用官方提供的 this.uploadList.length ,有坑
if (!check) {
this.$Message.error(`最多只能上传 ${this.maxNum} 个文件`);
return false;
}
this.fileNum++;
return this.prefixParams(file);
},
prefixParams(file) {
let fileNameArray = file.name.split('.');
let fileType = fileNameArray[fileNameArray.length - 1];
let fileName = file.name.slice(0, -fileType.length - 1);
return getOssSignature()
.then(res => {
let data = JSON.parse(res.data);
let randomNum = randomize('Aa0', 15);
this.extraParams.policy = data.policy;
this.extraParams.OSSAccessKeyId = data.accessid;
this.extraParams.signature = data.signature;
this.extraParams.key = `${data.dir}${randomNum}.${fileType}`;
this.uploadUrl = data.host;
if (this.$https && this.uploadUrl.indexOf('https') < 0) {
this.uploadUrl = this.uploadUrl.replace('http', 'https');
}
this.uidList[file.name] = {
fileurl: `${this.uploadUrl}/${this.extraParams.key}`,
//filetype: this.mapFileType(fileType),
filetype: fileType,
suffix: fileType,
filename: fileName,
};
})
.catch(error => {
console.error(error);
});
},
handleSuccess(event, file, fileList) {
this.$emit('isShow');
this.uploadList = fileList;
file.url = this.uidList[`${file.name}`].fileurl;
let cpFileList = fileList.map(file => this.uidList[`${file.name}`]);
this.$emit('upload-success', {
file: this.uidList[`${file.name}`],
fileList: cpFileList,
});
},
handleError(event, file) {
delete this.uidList[`${file.name}`];
this.fileNum--;
},
handleFormatError(file) {
this.$Message.warning(this.$t('passenger.file_rules'));
this.fileNum--;
// this.$emit('format-error', file);
},
},
};
</script>
<style lang="scss" type="text/scss">
.uploader-container {
width: 100%;
height: 100%;
position: relative;
.ivu-upload {
height: 100%;
}
}
.demo-upload-list {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
margin-right: 4px;
}
.demo-upload-list img {
width: 100%;
height: 100%;
}
.demo-upload-list-cover {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}
.demo-upload-list-cover i {
color: #fff;
font-size: 20px;
cursor: pointer;
margin: 0 2px;
}
.upload-zone {
padding: 20px 0;
&__icon {
color: #3399ff;
}
}
</style>
iview上传图片
于 2021-07-01 13:42:17 首次发布