11.1
This commit is contained in:
parent
d1715a03a3
commit
2743c57e6a
src
|
@ -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")
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
|
@ -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>
|
|
@ -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
58
src/views/test.vue
Normal 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.raw才是真实的file文件,file.value只是一个Proxy代理对象
|
||||||
|
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>
|
Loading…
Reference in New Issue
Block a user