el-upload 上传文件

最新推荐文章于 2024-09-12 14:31:28 发布

向右看齐--

最新推荐文章于 2024-09-12 14:31:28 发布

阅读量6.1k

点赞数

分类专栏： vue 文章标签： vue.js el-upload el-dialog

本文链接：https://blog.csdn.net/weixin_39461487/article/details/122324402

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这段内容展示了如何利用Element UI库的el-dialog组件和el-upload组件实现一个弹窗式的文件上传功能。用户点击上传按钮后，会弹出一个对话框，其中包含一个上传文件的表单。用户可以选择文件并点击上传按钮进行提交。文件上传成功后，会显示成功通知，错误时则显示错误通知。此功能适用于前端开发中的文件交互场景。

摘要由CSDN通过智能技术生成

页面使用el-dialog 弹窗形式显示

<el-tag class="tag-item tag-width" style="cursor:pointer;" type="primary" @click="handleUpFile(row)">上传文件</el-tag>
<el-dialog title="上传" :visible.sync="dialogFileUploadVisible" class="file_dialog" width="30%">
  <el-upload ref="dataFormFile"
             :multiple="false"
             :limit="1"
             :data="fileUpData"
             :file-list="fileUpList"
             :auto-upload="false"
             :action="upload_file_url"
             :on-success="fileUpSuccess"
             :on-error="fileUpError">
    <el-button type="success">选择文件</el-button>
  </el-upload>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFileUploadVisible = false">取消</el-button>
    <el-button type="primary" @click="fileUpload()">上传</el-button>
  </div>
</el-dialog>

js代码

export default {
  data() {
    return {
      // 上传文件参数
      fileUpData: {}, // 文件上传附带参数
      fileUpList: [], // 上传的文件列表
      dialogFileUploadVisible: false,
      upload_file_url: process.env.VUE_APP_ADMIN_BASE_URL + '/common/upload/upload_file', // 文件上传地址
    }
  },
  methods: {
    /**
     * 文件上传弹窗显示
     */
    handleUpFile(row) {
      console.log(row.id)
      this.fileUpData = {
        book_id: row.id
      }
      this.dialogFileUploadVisible = true
    },

    /**
     * 文件上传成功时的钩子
     */
    fileUpSuccess(res, file, fileList) {
      console.log('文件上传成功', res)
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`
      })
      this.fileUpList = []
      this.dialogFileUploadVisible = false
    },

    /**
     * 文件上传失败时的钩子
     */
    fileUpError(err, file, fileList) {
      console.log('文件上传失败', err)
      this.$notify.error({
        title: '错误',
        message: `文件上传失败`
      })
    },

    /**
     * 点击上传按钮时操作
     */
    fileUpload() {
      this.$refs.dataFormFile.submit()
    },
  }
}

显示效果：