vue element-ui配合form 上傳文件

 直接上代碼,接口和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', // 文件上傳
        },
    })
}

 

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