207 lines
8.0 KiB
HTML
207 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>图片上传</title>
|
||
<script src="https://unpkg.com/vue@next"></script>
|
||
<!-- import CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-plus@1.2.0-beta.5/dist/index.css">
|
||
|
||
<link rel="stylesheet" href="./css/index.css">
|
||
</link>
|
||
<!-- import JavaScript -->
|
||
<script src="https://unpkg.com/element-plus@1.2.0-beta.5"></script>
|
||
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
|
||
<script src="js/axios@0.26.0.min.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="upload">
|
||
<div class="upload-content">
|
||
<div class="image-list" v-loading="loading">
|
||
<el-empty description="还未上传凭证" v-if="!loading && !imageList.length"></el-empty>
|
||
<el-upload list-type="picture-card" :auto-upload="false" :file-list="imageList" action="#"
|
||
v-if="!loading && imageList.length">
|
||
<template #default>
|
||
<el-icon>
|
||
<plus />
|
||
</el-icon>
|
||
</template>
|
||
<template #file="{ file }" :key="file.ImageId">
|
||
<div class="image-box">
|
||
<img class="el-upload-list__item-thumbnail" :src="file.ImageUrl" alt="" />
|
||
<span class="el-upload-list__item-actions">
|
||
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
|
||
<svg t="1646800324230" class="icon" viewBox="0 0 1024 1024" version="1.1"
|
||
xmlns="http://www.w3.org/2000/svg" p-id="3120" width="20" height="20"><path d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3-7.7 16.2-7.7 35.2 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766z" p-id="3121" fill="#ffffff"></path><path d="M508 336c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" p-id="3122" fill="#ffffff"></path></svg>预览
|
||
</span>
|
||
</span>
|
||
</div>
|
||
<div class="image-title">{{file.ImageName}}</div>
|
||
</template>
|
||
</el-upload>
|
||
</div>
|
||
|
||
<el-image style="width: 0px;height: 0px;" ref="showPreviewRef" :src="url && url[previewIndex]"
|
||
:preview-src-list="url" :initial-index="previewIndex">
|
||
</el-image>
|
||
<div class="upload-footer footer-tip">
|
||
|
||
注意：上传文件大小小于4M, 上传文件格式：jpg、png、gif
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function getreqstr(e) {
|
||
const keyValue = location.search.substr(1)
|
||
const reg = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i")
|
||
const matchValue = keyValue.match(reg)
|
||
if (matchValue) {
|
||
return matchValue[2]
|
||
|
||
}
|
||
return ''
|
||
}
|
||
|
||
const {
|
||
defineComponent,
|
||
ref,
|
||
nextTick
|
||
} = Vue;
|
||
const {
|
||
ElMessage, Delete
|
||
} = ElementPlus
|
||
// const { Plus, ZoomIn, Download, Delete } = ElementPlusIcons
|
||
const upload = {
|
||
|
||
setup() {
|
||
const tableId = getreqstr('id');
|
||
const tableName = getreqstr('tablename');
|
||
const tableType = getreqstr('tabletype');
|
||
const readonly = getreqstr('readonly') ? true : false;
|
||
const actions = 'https://pos.eshangtech.com/EShangApiMain'
|
||
let uploadRef = ref(null)
|
||
let showPreviewRef = ref(null)
|
||
let filename = ref('')
|
||
let fileList = ref([])
|
||
let imageList = ref([])
|
||
let actionpath = ref('')
|
||
let fileType = ref('')
|
||
let previewIndex = ref(0)
|
||
let loading = ref(true)
|
||
let url = ref([])
|
||
|
||
|
||
const submitUpload = () => {
|
||
|
||
if (fileList.value.length > 0) {
|
||
const file = fileList.value[0].raw
|
||
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' ||
|
||
file.type === 'image/jpg' || file.type === 'image/gif'
|
||
// const isLt2M = file.size / 1024 / 1024 < 2
|
||
|
||
if (!isJPG) {
|
||
ElMessage({
|
||
type: 'error',
|
||
message: '请选择图片!'
|
||
})
|
||
|
||
return
|
||
}
|
||
// ElMessage({
|
||
// type: 'info',
|
||
// message: '正在上传...'
|
||
// })
|
||
uploadRef.value.submit()
|
||
}
|
||
}
|
||
|
||
// 预览图片
|
||
|
||
const handlePictureCardPreview = (file) => {
|
||
const index = url.value.findIndex(n => n === file.ImageUrl)
|
||
previewIndex.value = index
|
||
|
||
nextTick(() => {
|
||
showPreviewRef.value.showViewer = true
|
||
})
|
||
|
||
|
||
}
|
||
const removeFile = (file) => {
|
||
filename.value = ''
|
||
}
|
||
const uploadFailFn = () => {
|
||
|
||
}
|
||
const clearFile = () => {
|
||
|
||
nextTick(() => {
|
||
filename.value = ''
|
||
})
|
||
ElMessage({
|
||
type: 'success',
|
||
message: '上传成功!'
|
||
})
|
||
loading.value = true
|
||
imageList.value = []
|
||
uploadRef.value.clearFiles()
|
||
getImages(tableId)
|
||
}
|
||
// 获取图片列表
|
||
const getImages = (id) => {
|
||
|
||
axios.get(actions + '/Picture/GetPictureList?TableId=' + id + '&TableName=' +
|
||
tableName + '&TableType=' + tableType)
|
||
.then(res => {
|
||
const data = res.data
|
||
if (data.Result_Code === 100) {
|
||
imageList.value = data.Result_Data.List
|
||
url.value = data.Result_Data.List.map(n => n.ImageUrl)
|
||
filename.value = ''
|
||
}
|
||
console.log(imageList.value)
|
||
setTimeout(() => {
|
||
|
||
loading.value = false
|
||
}, 200)
|
||
})
|
||
}
|
||
|
||
getImages(tableId)
|
||
|
||
return {
|
||
uploadRef,
|
||
filename,
|
||
readonly,
|
||
showPreviewRef,
|
||
fileList,
|
||
imageList,
|
||
previewIndex,
|
||
loading,
|
||
url,
|
||
// jugeInput,
|
||
actionpath,
|
||
// submitUpload,
|
||
// changeImage,
|
||
handlePictureCardPreview,
|
||
// handleRemove,
|
||
// removeFile,
|
||
// clearFile
|
||
|
||
}
|
||
}
|
||
|
||
}
|
||
const app = Vue.createApp(upload)
|
||
app.use(ElementPlus)
|
||
app.mount('#upload');
|
||
</script>
|
||
</body>
|
||
|
||
</html> |