支持上传多个附件

最新推荐文章于 2025-07-24 17:17:06 发布

原创最新推荐文章于 2025-07-24 17:17:06 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了在Vue应用中使用ElementUI的el-upload组件实现上传附件的功能，包括文件选择、格式验证、大小限制以及成功或错误时的处理。还展示了相关的JavaScript代码片段，如`fileChange`和`uploadFileNew`方法的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、上传附件组件

<el-form-item label="上传附件：">
                <el-upload
                  ref="upload"
                  :disabled="isDisabled"
                  class="upload-demo"
                  :action="uploadUrl"
                  :limit="10"
                  multiple
                  :on-preview="handlePreview"
                  :on-exceed="handleHandleExceed"
                  :before-upload="beforeAvatarUpload"
                  :on-error="handleError"
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  :on-change="fileChange"
                  :on-success="handleSuccess"
                  :auto-upload="false"
                >
                  <!-- <el-button slot="trigger" size="small" type="primary" :disabled="isDisabled" @click="getUUIDToFn">选取文件</el-button> -->
                  <el-button slot="trigger" size="small" type="primary" :disabled="isDisabled">选取文件</el-button>
                </el-upload>
                <p style="color: #888;">最多上传10个.doc,.docx,.xls,.xlsx,.wps,.pdf,.txt,.bmp,.jpg,.png,.mp4,.zip,.tif,.tiff,.7z格式文件，且文件大小不能超过50M</p>
              </el-form-item>

2、js代码

fileChange(file, fileList) {
      this.getUUIDToFn()
      this.fileList.push({
        name: file.name,
        attachId: this.uuid
      })
      this.uploadFileNew()
      this.fileNum = this.$refs.upload.uploadFiles.length
    },

uploadFileNew() { // 文件上传方法
      const { uploadFiles } = this.$refs.upload
      const form = new FormData()
      let status = true
      uploadFiles.forEach(item => {
        if (fileVerify(item)) { // 校验上传文件格式
          const size = (item.raw.size / (1024 * 1024)) <= 10
          if (!size) { // 校验上传文件的大小
            this.$message.warning(`${item.raw.name}大小超过10M`)
            status = false
            return
          }
        } else {
          status = false
          return
        }
        form.delete('file')
        form.append('file', item.raw)
      })
      if (status) {
        postByJson('/api/file/upload/upload-file?&ownSystem=notice&noteId=notice&ownBusiness=notice' + '&attachId=' + this.uuid, form).then(res => {
          if (res.code !== 200) {
            this.$message.error(res.message)
          }
        }).catch(() => {
        })
      }
    },
    handleSuccess(res, file) {
      if (res.code === 200) {
        this.saveLoading.close()
        this.fileList.push({
          name: file.name,
          attachId: this.uuid,
          url: res.data
        })
        this.addform.attachName = file.name
      } else {
        this.$message({
          message: res.message,
          type: 'error'
        })
        this.$refs.upload.uploadFiles.pop()
        this.saveLoading.close()
      }
    },