Question

因此，我正在使用名为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文件：从'axios'导入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);
};

URL指向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不是true。我有点迷茫，如果您能协助我进行调试，将不胜感激。谢谢您的宝贵时间。

Answer 1

必须通过multer在后端接收文件

无法上传图片Vue

1 个答案: