vue element-ui 上传文件

 直接上代码,接口和token添自己的其他可以照搬

<!-- 上传文件 -->
<template>
  <el-upload
  action="111"
  class="upload-demo"
  :http-request="httpRequest"
  >
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</template>
<script>
import { importWarehouseMateriel } from "@/api";
import session from "@/api/session"
  export default {
    data() {
      return {
      };
    },
    methods: {
      httpRequest(item){
        let formData = new FormData(); //创建form对象
        let token = session.getToken() //通过append向form对象添加数据
        formData.append("file", item.file);
        formData.append("token", token);
        console.log(param.get('file')); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
        importWarehouseMateriel(formData).then(json => {
          if (json.state === "ok") {
          }
        })
        return false  //屏蔽了action的默认上传
      },
        
    }
  }
</script>

 接口文件中的接口函数,只有这样写才有效果

export function importWarehouseMateriel(data) {
    return axios({
        method: "post",
        url: "",
        data,
        headers: {
            'Content-Type': 'multipart/form-data', // 文件上传
        },
    })
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章