2年前 · aebd02748f
--- a/src/components/upload/upload.vue
+++ b/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>