element 自定义上传文件

weixin_42670357

于 2019-07-03 13:32:24 发布

阅读量4.2k

点赞数 1

分类专栏： element

本文链接：https://blog.youkuaiyun.com/weixin_42670357/article/details/94556786

版权

element 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了一个基于Element UI的PDF文件上传组件实现。该组件使用FormData处理文件上传，并通过axios发送POST请求到指定接口。文章涵盖了HTML结构、JS逻辑处理、axios配置及请求接口的完整流程。

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

1.页面

<el-upload
              class="upload-demo"
              action=""
              :data="scope.row"
              accept=".pdf"
              :http-request="handleRequest"
              :show-file-list="false"
            >
              <el-button
                size="mini"
                type="primary"
              >上传</el-button>
               </el-upload>

2.js

handleRequest(param) {
      let fileObj = param.file;
      // FormData 对象
      let form = new FormData();
      // 文件对象
      form.append("file", fileObj);
      form.append('resourceId', this.resourceId)
      form.append('id', param.data.featid || param.data.XM_GUID)
      let self = this
      upload(form).then((res) => {
        console.log(res)
        let message = res.result
        if (message == '上传成功') {
          self.$message({
            message: '上传成功',
            type: 'success'
          });
        }
        else {
          self.$message.error(message)
        }
      })
    },

3.axios

export function upload(data) {
  return request({
    url: '/bisCommAccessory/upload',
    method: 'post',
    data,
    headers: {
      "Content-Type": 'multipart/form-data'
    }
  })
}

4.请求借口
在这里插入图片描述