效果图
组件代码 自行参考
<template>
<div class="img-upload" :class="sizeClass" style="margin-bottom: 10px" :style="'height:'+size+'px;width:'+size+'px'">
<a-upload
:action="uploadAction"
list-type="picture-card"
:file-list="fileList"
:beforeUpload="beforeUpload"
v-bind="$attrs"
:disabled="disabled"
:remove="removeFile"
:accept="acceptType"
:headers="{workNo: userInfo.workNo, 'X-Access-Token': token}"
>
<div v-if="fileList.length < limit">
<a-icon type="plus" />
<div class="ant-upload-text">
{
{
placeholder }}
</div>
<div style="margin-top:8px;color:rgba(0, 0, 0, 0.4)">
仅支持 PDF、JPG 和 PNG 格式。最大文件尺寸 10 MB
</div>
<div style="margin-top:2px;color:rgba(0, 0, 0, 0.4)">
(图片比例670*320)
</div>
</div>
</a-upload>
<a-modal :visible="previewVisible" title="预览" :footer="null" @cancel="handleCancel">
<img v-if="showImagePreview" alt="图片" style="width: 100%" :src="previewImage" />
<video v-else-if="showVideoPreview&&previewVisible" autoplay style="width: 100%" :src="previewImage"></video>
</a-modal>
</div>
</template>
<script>
import {
USER_INFO, ACCESS_TOKEN } from "@/store/mutation-types"
import Vue from 'vue'
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
export default {
name: "ImgUpload",
props: {
uri: {
type: String,
default: 'mm/mmWechatWelcomeMsg/upload'
},
value: {
type: Array,
default: () => ([])
},
limit: {
type: Number,
default: Infinity
},
disabled: {
type: Boolean,
default: false
},
fileType: {
type: String,
default: 'image'
},
size: {
type: Number,
default: 100
},
placeholder: {
type: String,
default: '点击上传'
}
},
data () {
return {
previewVisible: false,
previewImage: '',
fileList: this.value||[],
userInfo: Vue.ls.get(USER_INFO),
token: Vue.ls.get(ACCESS_TOKEN)
}
},
watch: {
value (val) {
this.fileList = val||[]
}
},
computed: {
showImagePreview () {
return ['image', '.jpg', '.png', '.jpeg', '.gif'].some(item => this.fileType.includes(item))
},
showVideoPreview () {
return ['.mp3', '.mp4', '.acc', 'audio', 'video'].some(item => this.fileType.includes(item))
},
uploadAction () {
return `${
window._CONFIG['domianURL']}/${
this.uri}`;
},
sizeClass () {
return 'img-size-'+this.size
},
acceptType () {
if (this.fileType == 'image') {
return 'image/*'
} else if (this.fileType == 'video') {
return 'video/*'
} else if (this.fileType == 'audio') {
return 'audio/*'
}
return this.fileType
}
},
methods: {
beforeUpload(file) {
return new Promise((resolve, reject) => {
let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
if (!isJpgOrPng) {
this.$message.error('格式错误，只能上传jpg、jpeg、png');
return reject(false);
}
let w = 0,h = 0;
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload=()=>{
const image = new Image();
image.src = reader.result;
image.onload=()=>{
w = image.width;
h = image.height;
const ratio = 670/320
if(w/h == ratio){
// 图片比例为670*320横纵比一致
return resolve(true);
}else{
this.$message.error('图片尺寸错误，只能上传670x320横纵比一致的图片');
return reject(false);
}
}
}
let isLt1M = file.size / 10240 / 10240 <= 1;
if (!isLt1M) {
this.$message.error('图片大小超过10MB!');
return reject(false);
}
return isJpgOrPng && isLt1M;
})
},
removeFile (file) {
this.$emit('delete', file)
if (this.limit == 1) {
this.$emit('change', [])
}
return true
},
handleCancel() {
this.previewVisible = false;
},
async handlePreview(file) {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
this.previewImage = file.url || file.preview;
this.previewVisible = true;
},
handleChange({
file,fileList }) {
this.fileList = fileList
if (file.status === 'done') {
for (let i = this.fileList.length-1;i>=0;--i) {
const tempFile = this.fileList[i]
if (tempFile.response && tempFile.response.success) {
this.$set(this.fileList, i, {
uid: tempFile.response.result.id,
name: tempFile.response.result.fileName,
url: tempFile.response.result.url,
status: 'done'
})
} else if (!tempFile.url){
this.$message.error('上传失败，请重试!')
this.fileList.splice(i,1)
}
}
this.$emit('change', this.fileList)
} else if (file.status === 'error') {
this.$message.error('上传失败，请重试!')
this.fileList = this.fileList.filter(item => item.status !== 'error')
}
this.$emit('input', this.fileList)
},
}
}
</script>
<style scoped lang="less">
.img-upload {
&.img-size-100 {
/deep/.ant-upload-list-picture-card-container {
width: 425px;
height: 152px;
}
/deep/.ant-upload.ant-upload-select-picture-card {
width: 425px;
height: 152px;
}
/deep/.ant-upload-list-picture-card .ant-upload-list-item {
width: 425px;
height: 152px;
}
.ant-upload-select-picture-card .ant-upload-text {
color: #666;
display: block;
}
}
&.img-size-50 {
/deep/.ant-upload-list-picture-card-container {
width: 50px;
height: 50px;
}
/deep/.ant-upload.ant-upload-select-picture-card {
width: 50px;
height: 50px;
}
/deep/.ant-upload-list-picture-card .ant-upload-list-item {
width: 50px;
height: 50px;
}
.ant-upload-select-picture-card .ant-upload-text {
margin-top: 8px;
color: #666;
display: none;
}
}
}
/deep/.ant-upload-list-picture .ant-upload-list-item,
/deep/.ant-upload-list-picture-card .ant-upload-list-item{
padding: 0;
}
.ant-upload-select-picture-card i {
font-size: 32px;
color: #999;
}
</style>