1 змінених файлів з 5 додано та 192 видалено
+ 5
- 192
src/components/upload/upload.vue
Переглянути файл
| @@ -1,200 +1,13 @@ | |||
| <template> | |||
| <<<<<<< HEAD | |||
| <el-row :gutter="20"> | |||
| <el-col :span="6"></el-col> | |||
| <el-col :span="16" v-if="filetype == 'file'"> | |||
| <el-upload | |||
| class="upload-demo" | |||
| drag | |||
| action="https://jsonplaceholder.typicode.com/posts/" | |||
| multiple | |||
| :on-preview="handlePreview" | |||
| :on-remove="handleRemove" | |||
| :before-remove="beforeRemove" | |||
| :limit="3" | |||
| :on-exceed="handleExceed" | |||
| :file-list="fileList" | |||
| :on-success="uploadSuc" | |||
| > | |||
| <el-icon class="el-icon--upload"> | |||
| <upload-filled /> | |||
| </el-icon> | |||
| <div class="el-upload__text">Drop file here or <em>click to upload</em></div> | |||
| <template #tip> | |||
| <div class="el-upload__tip">files with a size less than 500kb</div> | |||
| </template> | |||
| </el-upload> | |||
| </el-col> | |||
| <el-col :span="16" v-if="filetype == 'img'"> | |||
| <el-upload | |||
| action="https://jsonplaceholder.typicode.com/posts/" | |||
| list-type="picture-card" | |||
| :on-preview="handlePictureCardPreview" | |||
| :on-remove="handleRemove" | |||
| :file-list="fileList" | |||
| :limit="limit" | |||
| > | |||
| <el-icon> | |||
| <Plus /> | |||
| </el-icon> | |||
| </el-upload> | |||
| <el-dialog v-model="dialogVisible"> | |||
| <img w-full :src="dialogImageUrl" alt="Preview Image" /> | |||
| </el-dialog> | |||
| </el-col> | |||
| <el-col :span="6"> </el-col> | |||
| </el-row> | |||
| ======= | |||
| <el-row :gutter="20"> | |||
| <el-col :span="6"></el-col> | |||
| <el-col :span="16"> | |||
| <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple | |||
| :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" | |||
| :on-exceed="handleExceed" :file-list="fileList" :on-success="uploadSuc"> | |||
| <el-icon class="el-icon--upload"> | |||
| <upload-filled /> | |||
| </el-icon> | |||
| <div class="el-upload__text"> | |||
| Drop file here or <em>click to upload</em> | |||
| </div> | |||
| <template #tip> | |||
| <div class="el-upload__tip"> | |||
| files with a size less than 500kb | |||
| </div> | |||
| </template> | |||
| </el-upload> | |||
| </el-col> | |||
| <!--<el-col :span="16" v-if="filetype == 'img'"> | |||
| <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" | |||
| :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :file-list="fileList" :limit="limit" :before-remove="beforeRemove" | |||
| :on-exceed="handleExceed" :on-success="uploadSuc"> | |||
| <el-icon :size="size"> | |||
| <Plus/> | |||
| </el-icon> | |||
| </el-upload> | |||
| <el-dialog v-model="dialogVisible"> | |||
| <img w-full :src="dialogImageUrl" alt="Preview Image" /> | |||
| </el-dialog> | |||
| </el-col>--> | |||
| <el-col :span="6"> | |||
| </el-col> | |||
| </el-row> | |||
| >>>>>>> eb48be82216b19224f8ea8622d7e829d504769e4 | |||
| </template> | |||
| <script lang="ts"> | |||
| import { ref } from 'vue' | |||
| import { UploadFilled, Plus } from '@element-plus/icons-vue' | |||
| import { ElMessage, ElMessageBox } from 'element-plus' | |||
| import type { UploadProps, UploadUserFile } from 'element-plus' | |||
| <script> | |||
| export default { | |||
| <<<<<<< HEAD | |||
| props: ['type', 'limit'], | |||
| setup(props, content) { | |||
| let filetype = ref('') | |||
| let fileLimit = ref(1) | |||
| filetype.value = props.type | |||
| fileLimit.value = props.limit | |||
| const dialogImageUrl = ref('') | |||
| const dialogVisible = ref(false) | |||
| console.log(props) | |||
| const fileList = ref<UploadUserFile[]>([ | |||
| /*{ | |||
| ======= | |||
| props: ["type","limit"], | |||
| setup(props, content) { | |||
| console.log("-------------------------") | |||
| let filetype = ref(''); | |||
| let fileLimit = ref(1); | |||
| let size = ref(15); | |||
| filetype.value = props.type; | |||
| fileLimit.value = props.limit; | |||
| const dialogImageUrl = ref('') | |||
| const dialogVisible = ref(false) | |||
| console.log(props,"--",filetype) | |||
| const fileList = ref<UploadUserFile[]>([ | |||
| /*{ | |||
| >>>>>>> eb48be82216b19224f8ea8622d7e829d504769e4 | |||
| name: 'food.jpeg', | |||
| url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', | |||
| }, | |||
| { | |||
| name: 'food2.jpeg', | |||
| url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100', | |||
| },*/ | |||
| ]) | |||
| const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => { | |||
| console.log(file, uploadFiles) | |||
| } | |||
| const handlePreview: UploadProps['onPreview'] = (uploadFile) => { | |||
| console.log(uploadFile) | |||
| } | |||
| const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => { | |||
| ElMessage.warning( | |||
| `The limit is 3, you selected ${files.length} files this time, add up to ${ | |||
| files.length + uploadFiles.length | |||
| } totally` | |||
| ) | |||
| } | |||
| const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => { | |||
| return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then( | |||
| () => true, | |||
| () => false | |||
| ) | |||
| } | |||
| // 上传前校验 | |||
| const beforeUpload = (file) => { | |||
| /*console.log('上传前端校验',file.size); | |||
| const isLt10M = file.size / 1024 / 1024 < 10; | |||
| if (!isLt10M) { | |||
| this.$message.error('上传图片不能超过10MB哦!'); | |||
| return false; | |||
| }*/ | |||
| } | |||
| const uploadSuc = (res, file) => { | |||
| console.log('uploadSuc', res.file) | |||
| console.log('handleSuccessres', res) | |||
| console.log('handleSuccessfile', file) | |||
| /*if (res) { | |||
| setTimeout(() => { | |||
| alert('上传成功') | |||
| }, 1500); | |||
| } else { | |||
| alert('视频上传失败，请重新上传！'); | |||
| }*/ | |||
| } | |||
| const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => { | |||
| dialogImageUrl.value = uploadFile.url! | |||
| dialogVisible.value = true | |||
| } | |||
| return { | |||
| filetype, | |||
| fileList, | |||
| uploadSuc, | |||
| handleRemove, | |||
| handlePreview, | |||
| beforeRemove, | |||
| handleExceed, | |||
| beforeUpload, | |||
| dialogImageUrl, | |||
| dialogVisible, | |||
| handlePictureCardPreview, | |||
| } | |||
| }, | |||
| } | |||
| </script> | |||
| <style></style> | |||
| <style> | |||
| </style> | |||
Завантаження…