upload 结合图片上传功能 · ThinkPHP6.0/swoole/vue/MongoDb基础教程

``` <template> <div> <a-upload  name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"  action="https://phphd.budaohuaxia.com/api/Uploads/oss_uploadImage" :before-upload="beforeUpload" @change="handleChange" > <img v-if="imageUrl" :src="imageUrl" alt="avatar" style="width: 120px" /> <div v-else> <loading-outlined v-if="loading"></loading-outlined> <plus-outlined v-else></plus-outlined> <div class="ant-upload-text">Upload</div> </div> </a-upload> </div> </template> <script lang="ts"> import { PlusOutlined, LoadingOutlined } from "@ant-design/icons-vue"; import { message } from "ant-design-vue"; import { defineComponent, ref } from "vue"; interface FileItem { uid: string; name?: string; status?: string; response?: string; url?: string; type?: string; size: number; originFileObj: any; } interface FileInfo { file: FileItem; fileList: FileItem[]; } export default defineComponent({ components: { LoadingOutlined, PlusOutlined, }, setup() { const fileList = ref([]); const loading = ref<boolean>(false); const imageUrl = ref<string>(""); const handleChange = (info: FileInfo) => { if (info.file.status === "uploading") { loading.value = true; return; } if (info.file.status === "done") { imageUrl.value = info.file.response.data.src; loading.value = false; console.log(); } if (info.file.status === "error") { loading.value = false; message.error("upload error"); } }; const beforeUpload = (file: FileItem) => { const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png"; if (!isJpgOrPng) { message.error("You can only upload JPG file!"); } const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { message.error("Image must smaller than 2MB!"); } return isJpgOrPng && isLt2M; }; return { fileList, loading, imageUrl, handleChange, beforeUpload, }; }, }); </script> <style> .avatar-uploader > .ant-upload { width: 128px; height: 128px; } .ant-upload-select-picture-card i { font-size: 32px; color: #999; } .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; } </style> ```