vue 使用js实现批量上传图片功能并回显图片

凉柚ˇ

于 2024-07-12 17:13:22 发布

阅读量306

点赞数 6

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/han2434/article/details/140382797

版权

关于批量上传图片功能，可以通过js直接实现

核心功能实现：

在Vue组件的data函数中定义一个数组来存储选中的文件，并在methods中添加一个方法来处理文件选择事件。

methods: {
updateImgs(fieldname) {
      const inputFile = document.createElement('input')
      inputFile.type = 'file'
      inputFile.accept = 'image/*' // 只接受图片文件
      inputFile.multiple = true // 允许选择多个文件

      inputFile.click() // 触发文件选择对话框

      inputFile.onchange = async (e) => {
        const files = e.target.files // 获取所有选中的文件
        if (!files.length) return // 如果没有选中文件，直接返回

        // 遍历每个文件
        for (let i = 0; i < files.length; i++) {
          const file = files[i]
          const fileSizeMB = file.size / (1024 * 1024) // 转换为MB

          if (fileSizeMB > 2) {
            // 文件大小超过2MB，显示提示信息
            this.$message.error(`文件 ${file.name} 大小不能超过2MB`)
            continue // 跳过当前文件，继续检查下一个文件
          }

          // 使用 FormData 来构建上传的数据
          const formData = new FormData()
          formData.append('file', file)

          try {
            const { data: res } = await uploadFile(formData) // 你的配置后的上传图片接口
             //根据接口返回存图片的url 例this.xxx = res，之后应用到你的新增/编辑接口
             this.reportData.projimplement.imglist.push({
                  url: res.data.filePath,
                  description: file.name
                })
          } catch (error) {}
        }
      }
    },
    getFullImageUrl(relativePath) {
      // 结合服务器前缀和相对路径
      return `${this.serverPrefix}${relativePath}`
    },
    getPreviewList(imgList) {
    // 显示图片组
      return imgList.map((item) => this.getFullImageUrl(item.url))// 你的结构
    }
  }

实现了以下功能：

0.创建文件输入元素：使用document.createElement创建一个新的元素，类型设置为file，并且设置了accept属性来限制用户只能选择图片文件，同时设置了multiple属性允许用户选择多个文件。
1.触发文件选择对话框：通过调用inputFile.click()方法，模拟用户点击文件输入框，从而触发操作系统的文件选择对话框。
2.处理文件选择：通过监听inputFile元素的onchange事件，当用户选择了文件后，事件处理函数会被触发。
3.文件大小检查：在事件处理函数中，首先获取所有选中的文件，然后遍历这些文件，检查每个文件的大小是否超过2MB。如果文件大小超标，则显示错误提示并跳过该文件。
4.构建FormData：对于每个符合大小要求的文件，使用FormData对象来构建一个表单数据对象，并将文件附加到这个对象中。
5.异步上传文件：使用async/await语法，调用uploadFile函数（这个函数没有在代码中定义，可能是组件的另一个方法或者外部服务）来异步上传文件。uploadFile函数接收一个FormData对象作为参数，并返回一个包含上传结果的Promise。
6.处理上传结果：如果上传成功（res.success为true），则根据传入的fieldname参数，将文件路径添加到组件的相应数据属性中。之后显示成功消息。
7.错误处理：如果上传过程中出现错误，catch块会捕获异常，但当前的实现中并没有做任何错误处理，只是简单地忽略了错误。

HTML部分

<div style="position: relative">
            <el-button class="upimg_but" type="primary" size="small" @click="updateImgs"
              >上传</el-button
            >
            <div class="img-block">
              <div class="img-box" v-for="(item, index) in reportData.projimplement.imglist" :key="index">
                <el-tooltip effect="dark" :content="item.description" placement="bottom">
                  <el-image
                    style="width: 150px; height: 150px"
                    :src="getFullImageUrl(item.url)"
                    fit="contain"
                    lazy
                    :preview-src-list="getPreviewList(reportData.projimplement.imglist)"
                  ></el-image>
                </el-tooltip>
                <i class="el-icon-delete" style="cursor: pointer" @click="deleteImg(index)"></i>
              </div>
            </div>
          </div>

CSS部分

.img-block {
  padding-top: 30px;
  max-height: 320px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: auto;

  &::-webkit-scrollbar-track-piece {
    background: #e4e4e4;
  }

  &::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c2c2c2;
    border-radius: 20px;
  }

  .img-box {
    width: 33%;
    text-align: center;
    margin: 8px 0;
  }
}