This commit is contained in:
yuanteng 2024-11-01 13:04:02 +08:00
parent d1715a03a3
commit 2743c57e6a
4 changed files with 190 additions and 56 deletions

View File

@ -39,5 +39,10 @@ export const routes = [
component: ()=> import("../views/Commodity/TypeManagement.vue") component: ()=> import("../views/Commodity/TypeManagement.vue")
} }
] ]
},
{
path: '/Test',
name:'测试页面',
component: () => import("../views/test.vue")
} }
] ]

View File

@ -1,6 +1,6 @@
<template> <template>
<!-- 添加商品图片--> <!-- 添加商品图片-->
<div style="height: auto;margin-bottom: 10px;width: 480px;"> <!-- <div style="height: auto;margin-bottom: 10px;width: 480px;">
<div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div> <div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div>
<el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true"> <el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
@ -25,9 +25,9 @@
</span> </span>
</div> </div>
</template> </template>
</el-upload> </el-upload> -->
<!-- 添加图文描述--> <!-- 添加图文描述-->
<div style="margin-bottom: 10px;"> <!-- <div style="margin-bottom: 10px;">
<div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div> <div style="font-size: 20px;margin-bottom: 10px">添加图文描述</div>
<el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true"> <el-upload action="#" v-model:file-list="uploadedDescription" list-type="picture-card" :auto-upload="false" multiple="true">
<el-icon><Plus /></el-icon> <el-icon><Plus /></el-icon>
@ -52,20 +52,74 @@
</span> </span>
</div> </div>
</template> </template>
</el-upload> </el-upload> -->
<el-dialog v-model="dialogVisible"> <!-- <el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" /> <img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog> </el-dialog> -->
</div> <!-- </div> -->
<el-dialog v-model="dialogVisible"> <!-- <el-dialog v-model="dialogVisible">
<img w-full :src="dialogImageUrl" alt="Preview Image" /> <img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog> </el-dialog> -->
</div> <!-- </div> -->
<!-- 表单--> <!-- 表单-->
<div style="position: absolute;right: 20px;top: 100px;max-width: 50%" > <!-- <div style="position: absolute;right: 20px;top: 100px;max-width: 50%" > -->
<div >
<el-form :model="form" label-width="auto" style="width: 750px" size="large"> <el-form :model="form" label-width="auto" style="width: 750px" size="large">
<el-form-item label="添加商品图片" #default="scope">
<!-- <div style="font-size: 20px;margin-bottom: 10px">添加商品图片</div> -->
<el-upload
action="#"
v-model:file-list="uploadedFiles"
list-type="picture-card"
:auto-upload="false"
multiple="true"
:on-change="handleChange"
>
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
<!-- 添加图文描述-->
<el-form-item label="添加图文描述">
<el-upload
action="#"
v-model:file-list="uploadedDescription"
list-type="picture-card"
:auto-upload="false"
multiple="true"
>
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions">
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="descriptionRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="产品名称"> <el-form-item label="产品名称">
<el-input v-model="form.name" /> <el-input v-model="form.name" />
</el-form-item> </el-form-item>
@ -107,7 +161,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'; import { ref , onMounted } from 'vue';
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'; import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import {ElMessage, type UploadFile} from 'element-plus'; import {ElMessage, type UploadFile} from 'element-plus';
import myAxios from "@/api/myAxios"; import myAxios from "@/api/myAxios";
@ -117,17 +171,7 @@ const dialogVisible = ref(false);
const disabled = ref(false); const disabled = ref(false);
const uploadedFiles = ref<UploadFile[]>([]);// const uploadedFiles = ref<UploadFile[]>([]);//
const uploadedDescription = ref<UploadFile[]>([]);// const uploadedDescription = ref<UploadFile[]>([]);//
const handleRemove = (file: UploadFile) => { const form = ref({
uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
};
const descriptionRemove = (file: UploadFile) => {
uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
}
const handlePictureCardPreview = (file: UploadFile) => {
dialogImageUrl.value = file.url!;
dialogVisible.value = true;
};
const form = reactive({
name:'', name:'',
price:'', price:'',
quantity:'',// quantity:'',//
@ -137,37 +181,66 @@ const form = reactive({
label:'',// label:'',//
desc:'',// desc:'',//
}) })
onMounted(()=>{
addProduct() const formUrl = ref({
upload() productimgurl: '', //url
detailimgurl: '' //url
}) })
const handleRemove = (file: UploadFile) => {
uploadedFiles.value = uploadedFiles.value.filter((f) => f.uid !== file.uid);
};
const descriptionRemove = (file: UploadFile) => {
uploadedDescription.value = uploadedDescription.value.filter((f) => f.uid !== file.uid);
}
onMounted(()=>{
})
const onSubmit = () => {
console.log('submit!')
}
const handleChange =(file : Event)=>{
console.log(file);
// const target = file.target as HTMLInputElement;
// const file = target.files?.[0];
// if (file) {
// const reader = new FileReader();
// reader.onload = (e) => {
// if (e.target?.result) {
// typeForm.value.typeUrl = e.target.result as string; // URL
// }
// };
// reader.readAsDataURL(file); // Data URL
// }
}
const addProduct = async () => { const addProduct = async () => {
const res = await myAxios.post('goods/add',{ // const res = await myAxios.post('goods/add',{
name : form.name, // name : form.name,
price : form.price, // price : form.price,
inventory : form.quantity, // inventory : form.quantity,
type: form.resource, // type: form.resource,
label : form.label, // label : form.label,
intro : form.desc, // intro : form.desc,
festivalOrder : form.festivalName // festivalOrder : form.festivalName
}) // })
if(res.data.code == 1){ // if(res.data.code == 1){
ElMessage({ // ElMessage({
message: '上架成功', // message: '',
type: 'success' // type: 'success'
}) // })
}else{ // }else{
ElMessage({ // ElMessage({
message: '上架失败', // message: '',
type: 'error' // type: 'error'
}) // })
} // }
} // }
const upload = async () => { // const upload = async () => {
const res = await myAxios.post('file/upload/server',{ // const res = await myAxios.post('file/upload/server',{
multipartFile : uploadedFiles.value, // multipartFile : uploadedFiles.value,
biz : uploadedDescription.value // biz : uploadedDescription.value
}) // })
} }
// onMounted(() => { // onMounted(() => {
// getProductInformation() // getProductInformation()
@ -183,7 +256,5 @@ const upload = async () => {
// backPage() // backPage()
// } // }
// } // }
const onSubmit = () => {
console.log('submit!')
}
</script> </script>

View File

@ -168,7 +168,7 @@ const handleFileUpload = (event: Event) => {
}; };
reader.readAsDataURL(file); // Data URL reader.readAsDataURL(file); // Data URL
} }
}; }
const editShowForm = (index: number, row: any) => { const editShowForm = (index: number, row: any) => {
dialogVisible.value = true dialogVisible.value = true
typeForm.value = row typeForm.value = row

58
src/views/test.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<el-upload
:on-preview="previewFile"
limit="1"
:on-change="changeFile"
:auto-upload="false"
:data="uploadForm.data">
<template #trigger>
<el-button size="small" type="primary">选取附件</el-button>
</template>
<el-button style="margin-left: 10px;" size="small" type="success"
@click="submitUpload">上传到服务器</el-button>
</el-upload>
</template>
<script setup lang="ts">
import {ref, reactive} from "vue";
import { Delete, Plus, ZoomIn } from '@element-plus/icons-vue';
import {ElMessage, type UploadFile} from 'element-plus';
import myAxios from "@/api/myAxios";
const file = ref()
const changeFile = (uploadFile: UploadFile) => {
file.value = uploadFile;
console.log(file.value.raw)
}
const uploadForm = reactive({
data: {
fileId: '',
name: '',
type: ''
}
})
const submitUpload = async () => {
const jsonStr = JSON.stringify(uploadForm.data);
const blob = new Blob([jsonStr], {
type: 'application/json'
});
let formData = new FormData();
formData.append("obj", blob);
// file.value.rawfilefile.valueProxy
formData.append("file", file.value.raw);
const res = await myAxios.post('/file/upload/server/not_login',{
biz: 'test',
file: formData.get("get")
})
console.log(res)
// axios({
// method,
// url,
// data: formData,
// headers
// }).then(res => {
// console.log(res);
// console.log(res.data);
// });
}
</script>