Vue使用el-upload上传文件并以fromdata发送

最新推荐文章于 2024-08-01 16:29:24 发布

好耶

最新推荐文章于 2024-08-01 16:29:24 发布

阅读量1.7k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46229508/article/details/128550553

版权

该文章描述了一个使用Vue组件上传.xlsx文件，批量添加店铺的过程。文件上传不自动发送请求，需用户确认后通过axios发送POST请求，附带headers和formData数据，包括access_token、config_id和文件内容。

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

需求是上传文件，文件里面是一些ID，用来批量添加店铺。

          <el-upload
            ref="upload"
            accept=".xlsx"
            action="#"
            style="display: inline-block"
            :auto-upload="false"
            :limit="1"
            :on-change="onUploadChange"
            :before-upload="beforeAvatarUpload"
          >
            <el-button size="medium" type="primary">批量导入店铺</el-button>
          </el-upload>

是用按钮触发文件上传的，但是我设置了:auto-upload=“false”，就不会自动发送请求，只有点确定了才会发送请求。
在这里插入图片描述

    onUploadChange (file) {
	//获取文件
      this.uploadFile = file
    },
    // 阻止默认上传，解决控制台报错
    beforeAvatarUpload (file) {
      return false // 屏蔽了action的默认上传
    }
    // 点击确定发送请求 接口要求传fromdata类型的数据
    addRelation(){
    	let formData = new FormData()
        formData.append('config_id', this.addRelationConfigId)
        formData.append('is_affirmed', 0)
        //在onUploadChange里拿到了文件存到data里，这里取出来，记得要取文件的raw
        formData.append('files', this.uploadFile.raw)
        axios({
          url: `你要传的地址`,
          method: 'post',
          // 添加headers说明数据类型
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          params: {
          // query参数，token是全局变量，直接从localStorage里取
            access_token: localStorage.getItem('token')
          },
          data: formData
        }).then(res=>{
        	// 收到返回后的处理
        	console.log(res)
        })
    }