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")
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/Test',
|
||||
name:'测试页面',
|
||||
component: () => import("../views/test.vue")
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<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>
|
||||
<el-upload action="#" v-model:file-list="uploadedFiles" list-type="picture-card" :auto-upload="false" multiple="true">
|
||||
<el-icon><Plus /></el-icon>
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-upload> -->
|
||||
<!-- 添加图文描述-->
|
||||
<div style="margin-bottom: 10px;">
|
||||
<!-- <div style="margin-bottom: 10px;">
|
||||
<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-icon><Plus /></el-icon>
|
||||
|
|
@ -52,20 +52,74 @@
|
|||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</el-upload> -->
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<!-- <el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<el-dialog v-model="dialogVisible">
|
||||
<!-- <el-dialog v-model="dialogVisible">
|
||||
<img w-full :src="dialogImageUrl" alt="Preview Image" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-dialog> -->
|
||||
<!-- </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-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-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
|
|
@ -107,7 +161,7 @@
|
|||
</template>
|
||||
|
||||
<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 {ElMessage, type UploadFile} from 'element-plus';
|
||||
import myAxios from "@/api/myAxios";
|
||||
|
|
@ -117,17 +171,7 @@ const dialogVisible = ref(false);
|
|||
const disabled = ref(false);
|
||||
const uploadedFiles = ref<UploadFile[]>([]);//商品图片数组
|
||||
const uploadedDescription = ref<UploadFile[]>([]);//商品图文描述数组
|
||||
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);
|
||||
}
|
||||
const handlePictureCardPreview = (file: UploadFile) => {
|
||||
dialogImageUrl.value = file.url!;
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
const form = reactive({
|
||||
const form = ref({
|
||||
name:'',
|
||||
price:'',
|
||||
quantity:'',//产品数量
|
||||
|
|
@ -137,37 +181,66 @@ const form = reactive({
|
|||
label:'',//商品标签
|
||||
desc:'',//详情描述
|
||||
})
|
||||
onMounted(()=>{
|
||||
addProduct()
|
||||
upload()
|
||||
|
||||
const formUrl = ref({
|
||||
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 res = await myAxios.post('goods/add',{
|
||||
name : form.name,
|
||||
price : form.price,
|
||||
inventory : form.quantity,
|
||||
type: form.resource,
|
||||
label : form.label,
|
||||
intro : form.desc,
|
||||
festivalOrder : form.festivalName
|
||||
})
|
||||
if(res.data.code == 1){
|
||||
ElMessage({
|
||||
message: '上架成功',
|
||||
type: 'success'
|
||||
})
|
||||
}else{
|
||||
ElMessage({
|
||||
message: '上架失败',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
}
|
||||
const upload = async () => {
|
||||
const res = await myAxios.post('file/upload/server',{
|
||||
multipartFile : uploadedFiles.value,
|
||||
biz : uploadedDescription.value
|
||||
})
|
||||
// const res = await myAxios.post('goods/add',{
|
||||
// name : form.name,
|
||||
// price : form.price,
|
||||
// inventory : form.quantity,
|
||||
// type: form.resource,
|
||||
// label : form.label,
|
||||
// intro : form.desc,
|
||||
// festivalOrder : form.festivalName
|
||||
// })
|
||||
// if(res.data.code == 1){
|
||||
// ElMessage({
|
||||
// message: '上架成功',
|
||||
// type: 'success'
|
||||
// })
|
||||
// }else{
|
||||
// ElMessage({
|
||||
// message: '上架失败',
|
||||
// type: 'error'
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
// const upload = async () => {
|
||||
// const res = await myAxios.post('file/upload/server',{
|
||||
// multipartFile : uploadedFiles.value,
|
||||
// biz : uploadedDescription.value
|
||||
// })
|
||||
}
|
||||
// onMounted(() => {
|
||||
// getProductInformation()
|
||||
|
|
@ -183,7 +256,5 @@ const upload = async () => {
|
|||
// backPage()
|
||||
// }
|
||||
// }
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -168,7 +168,7 @@ const handleFileUpload = (event: Event) => {
|
|||
};
|
||||
reader.readAsDataURL(file); // 读取文件为Data URL
|
||||
}
|
||||
};
|
||||
}
|
||||
const editShowForm = (index: number, row: any) => {
|
||||
dialogVisible.value = true
|
||||
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