时间戳

首页 > 解决方案 > 无法上传图片Vue

vue.js - 无法上传图片Vue

问题描述

所以我正在使用一个名为vue-picture-input的包，并使用 axios 上传图像。我的 vue 文件包含这个元素：

 <picture-input
  ref="pictureInput"
  :width="500"
  :height="500"
  :removable="true"
  :custom-strings="{
    upload: '<h1>Upload it!</h1>',
    drag: 'Drag and drop your image here'
  }"
  button-class="ui button primary"
  remove-button-class="ui red button"
  accept="image/jpeg, image/png, image/gif"
  @change="onChanged"
  @remove="onRemoved"
/>

使用此方法上传：

uploadAPI('pages/', this.image, name)
          .then(response=>{
            console.log(response)
            if (response.data.success){
              this.image = '';
              console.log("Image uploaded successfully Harambe");
            }
          })
          .catch(err=>{
            console.error(err);
          });

我有参数中的所有值，API 接受这些参数并确认它有它们。uploadAPI 文件：import axios from 'axios'；从 '../../configs/config' 导入配置

export default function (urn, file, name) {
  if (typeof urn !== 'string') {
    throw new TypeError(`Expected a string, got ${typeof url}`);
  }

  const formData = new FormData();
  formData.append(name, file);
  const config = {
    headers: {
      'content-type': 'multipart/form-data'
    }
  };

  let url = configuration.SERVER.uploadURL + urn

  return axios.post(url, formData, config);
};

网址指向http://localhost:4000/static/uploads. 但是什么都没有上传。CORS 似乎没有问题，也没有发现任何错误。这对我来说很奇怪。对 axois 请求的响应是带有数据的状态 200：

<!doctype html>
<html data-n-head="">
  <head>
    <title data-n-head="true">nuxt-sever</title><meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="The Spiciest Nuxt.js Project"/><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/runtime.js" as="script" /><link rel="preload" href="/_nuxt/commons.app.js" as="script" /><link rel="preload" href="/_nuxt/vendors.app.js" as="script" /><link rel="preload" href="/_nuxt/app.js" as="script" />
  </head>
  <body data-n-head="">
    <div id="__nuxt"><style>#nuxt-loading {  visibility: hidden;  opacity: 0;  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  animation: nuxtLoadingIn 10s ease;  -webkit-animation: nuxtLoadingIn 10s ease;  animation-fill-mode: forwards;  overflow: hidden;}@keyframes nuxtLoadingIn {  0% {visibility: hidden;opacity: 0;  }  20% {visibility: visible;opacity: 0;  }  100% {visibility: visible;opacity: 1;  }}@-webkit-keyframes nuxtLoadingIn {  0% {visibility: hidden;opacity: 0;  }  20% {visibility: visible;opacity: 0;  }  100% {visibility: visible;opacity: 1;  }}#nuxt-loading>div,#nuxt-loading>div:after {  border-radius: 50%;  width: 5rem;  height: 5rem;}#nuxt-loading>div {  font-size: 10px;  position: relative;  text-indent: -9999em;  border: .5rem solid #F5F5F5;  border-left: .5rem solid #fff;  -webkit-transform: translateZ(0);  -ms-transform: translateZ(0);  transform: translateZ(0);  -webkit-animation: nuxtLoading 1.1s infinite linear;  animation: nuxtLoading 1.1s infinite linear;}#nuxt-loading.error>div {  border-left: .5rem solid #ff4500;  animation-duration: 5s;}@-webkit-keyframes nuxtLoading {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}@keyframes nuxtLoading {  0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);  }  100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);  }}</style><script>window.addEventListener('error', function () {  var e = document.getElementById('nuxt-loading');  if (e) e.className += ' error';});</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div><!-- https://projects.lukehaas.me/css-loaders --></div>
  <script type="text/javascript" src="/_nuxt/runtime.js"></script><script type="text/javascript" src="/_nuxt/commons.app.js"></script><script type="text/javascript" src="/_nuxt/vendors.app.js"></script><script type="text/javascript" src="/_nuxt/app.js"></script></body>
</html>

它不会打印出任何错误，并且 response.data.success 不正确。我有点迷茫，如果你能帮助我调试这个，我将不胜感激。感谢您的时间。

标签： vue.jsfile-uploaduploadaxiosnuxt.js

解决方案

必须使用 multer 在后端接收文件

推荐阅读