Jeeplus-vue 实现文件的上传功能

下面是详细的“Jeeplus-vue 实现文件上传功能”的攻略：

1. 前置条件

在进行文件上传的实现前，需要确保以下环境和工具已经安装和配置：

安装 Jeeplus：可以从 Jeeplus 官网下载最新版本，安装完成后需要对其进行初始化和配置；
项目中需引入 axios 和 element-ui 等依赖库；
页面中需要有一个上传按钮和相应的文件选择框。

2. 实现文件上传功能

2.1 创建上传组件

首先需要在 src/components 目录下创建一个名为 Upload.vue 的组件，用于实现文件上传功能。在该组件中，需要引入 element-ui 中的 el-upload 和 el-button 组件，同时使用 axios 库进行文件上传请求的发送。

<template>
  <el-upload
    class="upload-demo"
    action=""
    :auto-upload="false"
    :show-file-list="false"
    :on-change="handleChange"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import { Upload, Button } from 'element-ui'
import axios from 'axios'

export default {
  components: {
    ElUpload: Upload,
    ElButton: Button
  },
  methods: {
    handleChange (file) {
      const fileData = new FormData()
      fileData.append('file', file)
      axios.post('/upload', fileData)
        .then(response => {
          // 文件上传成功后的处理逻辑
        })
        .catch(error => {
          // 文件上传失败的处理逻辑
        })
    }
  }
}
</script>

<style scoped>
/* 样式定义 */
</style>

在上述代码中，首先引入了 element-ui 的 el-upload 和 el-button 组件，同时引入了 axios 库，用于发送文件上传请求。随后，在组件的 template 中使用了 el-upload 组件，并设置一些属性，用于控制上传的自动行为和显示效果，并绑定了 handleChange 方法，用于在文件选择后发送文件上传请求。在方法中，使用 FormData 对象封装上传的文件数据，并使用 axios.post 方法向后端发起上传请求。

需要注意的是，上述代码中的 action 属性暂时设置为空字符串，实际情况下需要设置为上传文件的后端接口地址。

2.2 添加文件上传接口

在服务端添加文件上传的接口，接收前端上传的文件，并进行保存和处理。在 Jeeplus 中，可以使用 Spring MVC 注解来快速实现文件上传功能。

@Controller
@RequestMapping("/file")
public class FileController {

    @ResponseBody
    @PostMapping(value = "/upload")
    public Map<String, Object> handleFileUpload(@RequestParam("file") MultipartFile file) {
        try {
            // 文件上传成功后的处理逻辑
            return Response.ok("上传成功");
        } catch (Exception e) {
            // 文件上传失败后的处理逻辑
            return Response.error("上传失败：" + e.getMessage());
        }
    }

}

在上述代码中，使用了 @PostMapping 注解来定义文件上传接口，同时使用 @RequestParam 注解来获取上传的文件数据。在方法中，可以进行文件保存、处理等操作，并根据实际情况返回相应的结果。

2.3 完善上传逻辑

在前端实现文件上传功能后，还需要对其进行完善和优化，以增强用户体验和文件上传的稳定性。

例如，可以在组件内添加文件类型、大小等检查逻辑，以防止不合法的文件上传；也可以在文件上传时添加进度条等显示效果，以展示文件上传的进度信息。

<template>
  <el-upload
    class="upload-demo"
    action=""
    :auto-upload="false"
    :show-file-list="false"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip" style="font-size: 12px">只能上传 jpg/png 格式的图片，且不超过 500kb</div>
    <el-progress
      ref="uploadProgress"
      class="upload-progress"
      :percentage="percent"
      hide-info
    ></el-progress>
  </el-upload>
</template>

<script>
import { Upload, Button, Progress, MessageBox } from 'element-ui'
import axios from 'axios'
import { getFileType } from '@/utils/file'
import { isImage } from '@/utils/validate'

export default {
  components: {
    ElUpload: Upload,
    ElButton: Button,
    ElProgress: Progress
  },
  data () {
    return {
      percent: 0,
      uploading: false
    }
  },
  methods: {
    beforeUpload (file) {
      const fileSize = file.size / 1024
      const fileType = getFileType(file.name)
      if (!isImage(fileType) || fileSize > 500) {
        MessageBox.alert('只能上传 jpg/png 格式的图片，且不超过 500kb', '提示', {
          confirmButtonText: '确定'
        })
        return false
      } else {
        return true
      }
    },
    handleChange (file) {
      const fileData = new FormData()
      fileData.append('file', file)
      this.uploading = true
      axios.post('/upload', fileData, {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            // 计算上传进度
            this.percent = parseInt(progressEvent.loaded / progressEvent.total * 100)
          }
        }
      })
        .then(response => {
          // 文件上传成功后的处理逻辑
        })
        .catch(error => {
          // 文件上传失败的处理逻辑
        })
        .finally(() => {
          this.uploading = false
        })
    }
  }
}
</script>

<style scoped>
.upload-progress {
  position: absolute;
  top: 40px;
  width: 100%;
}
</style>

在上述代码中，添加了 beforeUpload 方法，用于在文件上传前进行文件类型和大小的检查，限制只能上传 jpg/png 类型的图片，且文件大小不超过 500kb。同时，在上传过程中添加了一个进度条显示组件，使用 onUploadProgress 事件监听上传进度，并计算出上传的百分比，以展示上传进度信息。

3. 示例说明

以下是两个使用 Jeeplus-vue 实现文件上传功能的示例：

示例一：

在 Upload.vue 组件中添加一个 input 元素，使用 ref 属性进行引用，在 handleChange 方法中手动触发 input 的点击事件，以启动文件选择对话框，并选择需要上传的文件。

<template>
  <div>
    <input type="file" ref="uploadInput" style="display: none" @change="handleUploadClick" />
    <el-button size="small" type="primary" @click="handleUpload">点击上传</el-button>
    <el-progress
      ref="uploadProgress"
      class="upload-progress"
      :percentage="percent"
      hide-info
      :stroke-width="8"
    ></el-progress>
  </div>
</template>

<script>
import { Button, Progress, MessageBox } from 'element-ui'
import axios from 'axios'
import { getFileType } from '@/utils/file'
import { isImage } from '@/utils/validate'

export default {
  components: {
    ElButton: Button,
    ElProgress: Progress
  },
  data () {
    return {
      percent: 0,
      uploading: false
    }
  },
  methods: {
    handleUpload () {
      this.$refs.uploadInput.click()
    },
    handleUploadClick () {
      const files = this.$refs.uploadInput.files
      if (files.length === 0) {
        return
      }
      const file = files[0]
      const fileSize = file.size / 1024
      const fileType = getFileType(file.name)
      if (!isImage(fileType) || fileSize > 500) {
        MessageBox.alert('只能上传 jpg/png 格式的图片，且不超过 500kb', '提示', {
          confirmButtonText: '确定'
        })
        return false
      }
      const fileData = new FormData()
      fileData.append('file', file)
      this.uploading = true
      axios.post('/upload', fileData, {
        onUploadProgress: progressEvent => {
          if (progressEvent.lengthComputable) {
            this.percent = parseInt(progressEvent.loaded / progressEvent.total * 100)
          }
        }
      })
        .then(response => {
          // 文件上传成功后的处理逻辑
        })
        .catch(error => {
          // 文件上传失败的处理逻辑
        })
        .finally(() => {
          this.uploading = false
        })
    }
  }
}
</script>

<style scoped>
.upload-progress {
  position: absolute;
  top: 40px;
  width: 100%;
}
</style>

在上述代码中，通过添加一个 input 元素，并使用 ref 属性对其进行引用，实现了点击上传按钮时打开文件选择对话框的功能。同时，在 handleUploadClick 方法中获取选择的文件对象，并根据实际情况进行文件类型和大小的检查。

示例二：

在 Upload.vue 组件中添加一个可重复上传的文件列表，并在上传成功后将上传的文件对象添加到列表中，以实现一次上传多个文件的功能。

<template>
  <el-upload
    class="file-list"
    action=""
    :auto-upload="false"
    :multiple="true"
    :list-type="'text'"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">支持上传多个文件，上传文件大小不得超过 1MB</div>
  </el-upload>
  <el-table ref="uploadList" :data="fileList" style="width: 100%;">
    <el-table-column label="文件名" prop="name"></el-table-column>
    <el-table-column label="文件大小" prop="size"></el-table-column>
    <el-table-column label="操作" width="110">
      <template slot-scope="{ row }">
        <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { Upload, MessageBox, Button, Table, TableColumn } from 'element-ui'
import axios from 'axios'
import { getFileType } from '@/utils/file'
import { isImage } from '@/utils/validate'

export default {
  components: {
    ElUpload: Upload,
    ElButton: Button,
    ElTable: Table,
    ElTableColumn: TableColumn
  },
  data () {
    return {
      fileList: [],
      percent: 0,
      uploading: false
    }
  },
  methods: {
    beforeUpload (file) {
      const fileSize = file.size / 1024 / 1024
      if (fileSize > 1) {
        MessageBox.alert('上传文件大小不得超过1MB', '提示', {
          confirmButtonText: '确定'
        })
        return false
      } else {
        return true
      }
    },
    handleChange (files) {
      const fileData = new FormData()
      for (let i = 0; i < files.length; i++) {
        const itemFile = files[i]
        const fileItem = {
          name: itemFile.name,
          size: itemFile.size
        }
        // 将上传文件添加到文件列表中
        this.fileList.push(fileItem)
        fileData.append('file', itemFile, itemFile.name)
        this.uploading = true
        axios.post('/upload', fileData, {
          onUploadProgress: progressEvent => {
            if (progressEvent.lengthComputable) {
              this.percent = parseInt(progressEvent.loaded / progressEvent.total * 100)
            }
          }
        })
          .then(response => {
            // 执行上传成功逻辑
          })
          .catch(error => {
            // 执行上传失败逻辑
          })
          .finally(() => {
            this.uploading = false
          })
      }
    },
    handleDelete (row) {
      const index = this.fileList.indexOf(row)
      this.fileList.splice(index, 1)
    }
  }
}
</script>

<style scoped>
.file-list {
  display: block;
  margin-bottom: 20px;
}
</style>

在上述代码中，添加了一个名为 fileList 的数组，用于存储上传的文件对象，并使用 el-table 组件展示上传文件列表。在 handleChange 方法中，通过遍历文件对象，将其添加到 fileList 中，并进行文件上传请求的发送操作；在文件上传成功或失败后，可以对 fileList 进行相应的数据操作，以更新上传文件的状态和展示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jeeplus-vue 实现文件的上传功能 - Python技术站