TASK
This commit is contained in:
shahaibo
318
src/component/productComponent/productPicUpload.vue
Normal file
318
src/component/productComponent/productPicUpload.vue
Normal file
@@ -0,0 +1,318 @@
|
||||
<template>
|
||||
<a-modal class="add_product_modal_component"
|
||||
v-model:visible="addProductPicModal"
|
||||
:footer="null"
|
||||
title="商品图片上传"
|
||||
width="1150px"
|
||||
:maskClosable="false"
|
||||
:destroyOnClose="true"
|
||||
:centered="true"
|
||||
@cancel="closeModal"
|
||||
>
|
||||
<div class="upload_modal_body">
|
||||
<div class="upload_img_body scroll_style" >
|
||||
<div class="upload_item">
|
||||
|
||||
<div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'uploading'">
|
||||
<a-spin :indicator="indicator" tip="Uploading..."/>
|
||||
</div>
|
||||
<div class="upload_file_item_content" v-show="file?.status === 'done'">
|
||||
<img v-lazy="file?.pictureUrl" class="upload_img">
|
||||
<div class="delete_file_block" @click="deleteFile(index)">
|
||||
<span class="icon iconfont icon-shanchu"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_file_item upload_component" v-show="fileList.length < 100">
|
||||
<a-upload
|
||||
:action="uploadUrl + '/api/product/uploadFileSingle'"
|
||||
class="upload_component_button"
|
||||
list-type="picture-card"
|
||||
:data="{
|
||||
...upload
|
||||
}"
|
||||
:headers="{Authorization:token}"
|
||||
v-model:file-list="fileList"
|
||||
:before-upload="beforeUpload"
|
||||
multiple
|
||||
:maxCount="100"
|
||||
accept=".jpg,.png,.jpeg,.bmp"
|
||||
@change="(file)=>fileUploadChange(file)"
|
||||
>
|
||||
<div class="upload_tip_block" v-show="fileList.length < 100">
|
||||
<span class="icon iconfont add_pic_button_icon icon-tianjiatupian_huaban"></span>
|
||||
</div>
|
||||
</a-upload>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload_max_tip">
|
||||
<WarningFilled class="icon-zhuyi"/>
|
||||
<span>Maximum 100 images can be uploaded, Maximum 2M per image</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_button_list">
|
||||
<a-button class="primary_button" type="primary" size="large" @click="closeModal()">Submit</a-button>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
import { defineComponent, h,reactive,ref,onMounted} from 'vue'
|
||||
import { LoadingOutlined,WarningFilled } from '@ant-design/icons-vue';
|
||||
import {getCookie} from '@/tool/cookie'
|
||||
import {getUploadUrl} from '@/tool/util'
|
||||
import { message, Upload } from 'ant-design-vue';
|
||||
export default defineComponent({
|
||||
name:'ProductPicUpload',
|
||||
components:{WarningFilled},
|
||||
emits: ['uploadPicChange'],
|
||||
setup(props,{ emit }){
|
||||
let addProductPicModal = ref(false)
|
||||
let fileList:any = ref([])
|
||||
let templateModal:any = ref(false)
|
||||
let templateFileList:any = ref([])
|
||||
let upload:any = reactive({
|
||||
timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
|
||||
})
|
||||
let beforeUploadIndex:any = 0
|
||||
let successFileList:any = ref([])
|
||||
let token:any = ref('')
|
||||
let indicator :any = h(LoadingOutlined, {
|
||||
style: {
|
||||
fontSize: '24px',
|
||||
},
|
||||
spin: true,
|
||||
})
|
||||
let uploadUrl:any = ref('')
|
||||
|
||||
let fileUploadChange = (data:any) =>{
|
||||
let file = data.file
|
||||
if(file.status === 'done'){
|
||||
let res = file.response
|
||||
if(res.data){
|
||||
file.pictureUrl = res.data.pictureUrl
|
||||
file.md5 = res.data.md5
|
||||
file.resData = res.data
|
||||
successFileList.value = fileList.value.filter((v:any)=> v.status === 'done')
|
||||
emit('uploadPicChange', {fileList:successFileList.value})
|
||||
}else{
|
||||
let index = -1
|
||||
fileList.value.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
fileList.value.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + ' ' + res.errMsg)
|
||||
}
|
||||
|
||||
}else if(file.status === 'error'){
|
||||
let index = -1
|
||||
fileList.value.forEach((ele:any,index1:any) => {
|
||||
if(file.uid === ele.uid){
|
||||
index = index1
|
||||
}
|
||||
});
|
||||
if(index > -1){
|
||||
fileList.value.splice(index, 1)
|
||||
}
|
||||
message.error(file.name + 'upload failed')
|
||||
}
|
||||
}
|
||||
|
||||
let beforeUpload = (file:any,fileList:any) => {
|
||||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
|
||||
beforeUploadIndex = beforeUploadIndex +1
|
||||
console.log(file, 66)
|
||||
if(fileList.length > 10 && beforeUploadIndex == fileList.length){
|
||||
message.error('You can only upload 10 pictures at a time!');
|
||||
}
|
||||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload Image file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 5MB!');
|
||||
}
|
||||
if(beforeUploadIndex == fileList.length) {
|
||||
beforeUploadIndex = 0
|
||||
}
|
||||
return (isJpgOrPng && isLt2M && fileList.length <= 10) || Upload.LIST_IGNORE;
|
||||
}
|
||||
|
||||
let deleteFile = (index:any) =>{
|
||||
fileList.value.splice(index,1)
|
||||
successFileList.value = fileList.value
|
||||
emit('uploadPicChange', {fileList:successFileList.value})
|
||||
}
|
||||
|
||||
let openPictureModal = () =>{
|
||||
addProductPicModal.value = true
|
||||
}
|
||||
|
||||
let closeModal = () =>{
|
||||
addProductPicModal.value = false
|
||||
}
|
||||
|
||||
let clearPicData = () =>{
|
||||
fileList.value = []
|
||||
successFileList.value =[]
|
||||
}
|
||||
|
||||
|
||||
onMounted(()=>{
|
||||
token.value = getCookie('token') || '',
|
||||
uploadUrl.value = getUploadUrl()
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return {
|
||||
addProductPicModal,
|
||||
fileList,
|
||||
templateModal,
|
||||
templateFileList,
|
||||
upload,
|
||||
successFileList,
|
||||
indicator,
|
||||
token,
|
||||
uploadUrl,
|
||||
fileUploadChange,
|
||||
beforeUpload,
|
||||
deleteFile,
|
||||
openPictureModal,
|
||||
closeModal,
|
||||
clearPicData
|
||||
}
|
||||
},
|
||||
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.add_product_modal_component{
|
||||
|
||||
|
||||
.upload_modal_body{
|
||||
height: 600px;
|
||||
|
||||
.upload_img_body{
|
||||
height: calc(100% - 30px);
|
||||
overflow-y: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.upload_file_item{
|
||||
margin: 0 17px 17px 0;
|
||||
display: inline-block;
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
border: 1px solid #F5F5F5;
|
||||
vertical-align: top;
|
||||
|
||||
&.upload_component{
|
||||
background: #FFFFFF;
|
||||
|
||||
.upload_tip_block{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.add_pic_button_icon{
|
||||
font-size: 44px;
|
||||
color: #C6CBD3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.upload_file_item_content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
&:hover .delete_file_block{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.upload_img{
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.delete_file_block{
|
||||
display: none;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
background: #000000;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.upload_max_tip{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
color: #030303;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.icon-zhuyi{
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal_button_list{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less">
|
||||
.upload_component_button{
|
||||
width: 165px;
|
||||
height: 165px;
|
||||
|
||||
.ant-upload-list{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.ant-upload-select-picture-card{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user