在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Python  網(wǎng)絡(luò)安全  HTML/ 關(guān)于vue+koa2 跨域上傳文件問題

關(guān)于vue+koa2 跨域上傳文件問題

跨域上傳一直出錯(cuò),我在后臺(tái)打斷點(diǎn)一直進(jìn)不去,試了好多種都沒有用,一直報(bào)錯(cuò)
POST http://127.0.0.1:8888/api/upload 404 (Not Found)

我感覺是請(qǐng)求頭的問題,項(xiàng)目其他功能配置都正常,都是上傳不對(duì),初學(xué)者不知道怎么配,希望大神幫忙答疑解惑,謝謝 T_T T_T T_T

//后端入口
const Koa = require("koa");
const app = new Koa();
const Router = require("koa-router");
const router = new Router({ prefix: "/api" });
//文件上傳配置
const koaBody = require('koa-body');
app.use(koaBody({
  multipart: true,
}));

const bodyParser = require("koa-bodyparser");
app.use(bodyParser());

//跨域訪問配置
const cors = require("koa2-cors"); 
app.use( 
  cors({
    origin: function(ctx) {
      return "http://localhost:8080";
    },
    exposeHeaders: ["WWW-Authenticate", "Server-Authorization"],
    maxAge: 3600,
    allowMethods: ['GET', 'PUT', 'POST'],
    allowHeaders: ["Content-Type", "Authorization", "Accept"]
  })
);
const fileIO = require("./middleware/file.js");
//路由
router.post("/upload'", fileIO.Upload);

app.use(router.routes()).use(router.allowedMethods()); //加載路由中間件

app.listen(8888, () => {
  console.log("The server is running at http://localhost:" + 8888);
});

fileIO.Upload

//file.js
const Upload = async (ctx) => {
  const file = ctx.request.body.files.file; // 獲取上傳文件
  const reader = fs.createReadStream(file.path); // 創(chuàng)建可讀流
  const ext = file.name.split(".").pop(); // 獲取上傳文件擴(kuò)展名
  const upStream = fs.createWriteStream(
    `upload/${Math.random().toString()}.${ext}`
  ); // 創(chuàng)建可寫流
  reader.pipe(upStream); // 可讀流通過管道寫入可寫流
  return (ctx.body = "上傳成功");
};

const fileIO = {
  Upload
};
module.exports = fileIO;

前端頁面

<template>
  <div>
    <form>
      <input type="file" value="選擇文件" @change="getFile($event)">
      <input type="button" value="上傳到服務(wù)器" @click="tosubmit">
    </form>
  </div>
</template>

<script>
import axios from "../axios/axios";

export default {
  data() {
    return {
      file: ""
    };
  },
  methods: {
    getFile(event) {
      this.file = event.target.files[0];
      console.log(this.file);
    },
    tosubmit() {
      event.preventDefault();
      let formData = new FormData();
      formData.append("file", this.file);
      console.log(formData.get("file"));
      
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        },
      };
      
      axios.upload(formData, config)
        .then(({ date }) => {
          console.log(date);
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

axios配置

import axios from "axios";
import router from "../router";

//創(chuàng)建axios實(shí)例
var instance = axios.create({
  timeout: 5000,
  headers: { "Content-Type": "application/json;charset=UTF-8" },
  baseURL:'http://127.0.0.1:8888'
});

//request攔截器
instance.interceptors.request.use(config => {
  //判斷是否存在token,如果存在的話,則每個(gè)http header都加上token
  if (store.state.token) {
    config.headers.Authorization = `token ${store.state.token}`;
  }
  return config;
});

export default {
  upload(data,config){
    return instance.post("/api/upload",data,config);
  }

};

還有個(gè)疑惑就是為什么app.use(koaBody())如果寫在app.use(bodyParser())后面的話就直接登錄不了了,很疑惑,哎,困難重重.......

回答
編輯回答
淺時(shí)光

好了,抱歉我秀逗了,我多寫了一個(gè)'號(hào),找了半天沒有找到,我也是醉了

2018年1月20日 20:57