Question

这是我的问题，我正在使用VueJs，当我将图像发布到我的服务器时，我的服务器会修改此图像并创建另一个图像并返回新文件的名称，但是当出现错误时我尝试使用新路径要求（）我的新img ...这是我的Html：

<template>
  <div id="app">
    <div v-if="codeStep == 0">
      <img class="upload_img" :src="filename" />
      <label id="selectfile_button" for="files_selecter" class="btn">Select Image</label>
      <input id="files_selecter" type="file" style="visibility:hidden;" @change="onFileChange"/>
    </div>
    <div v-else="">
      <img class="upload_img" :src="filename" />
      <p> {{ percentCompleted }} </p>
      <button v-on:click="removeImage">{{ cancelText }}</button>
      <button v-if="codeStep == 1" v-on:click="submit">{{ nextText }}</button>
      <button v-else="" v-on:click="finishText">{{ finishText }}</button>
    </div>
  </div>
</template>

我的文件路径声明：

export default {

  data() {
    return {
      codeStep: 0,
      cancelText: "Cancel",
      nextText: "Blur",
      finishText: "Finish",
      filename: require('../../images/default-image.png'),
      attachments: [],
      data: new FormData(),
      errors: {},
      percentCompleted: 0,
    }
  },

我发布了我的函数，我得到了一个filename.jpg例如：

  submit() {
    this.prepareFields();
    var config = {
      header: {'Content-Type': 'multipart/form-data'},
      onUploadProgress: function(progressEvent) {
        this.percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
        this.$forceUpdate();
      }.bind(this)
    };
    let self = this;
    axios.post('/api/upload', this.data, config)
      .then(function (response) {
        console.log(response);
        console.log('Successful Upload');
        console.log(response.data)
        var res = response.data.filePath;
        console.log(res)

        // The error is here
        self.filename = require('../../images/' + res);
        self.codeStep = 2;
      })
      .catch(function(error){
        console.log(error)
      })
  },

这是我的控制台上的错误：

错误：找不到模块'./goku.jpg'。在webpackContextResolve（。 $：24）在webpackContext（。 $：19）在upload.vue？4b64：134 在

我认为vueJs require可能不支持在运行时调用新文件，因为它将所有内容存储在dist /中？

ps：vuejs很好地找到了第一个default-image.png。

感谢您的时间......

西蒙

Answer 1

我最终找到了一种使用require显示我的img whitout的方法。而不是将我的图像保存在/ image中，我将它存储在/ wwwroot / images /这是Vuejs webpack RootPath 的子目录中。这样做，我现在可以直接从Url访问我的图像，例如： localhost：8080 / images / example.jpg 。

axios.post('/api/upload', this.data, config)
      .then(function (response) {
        console.log(response);
        console.log('Successful Upload');
        console.log(response.data)
        var res = response.data.filePath;
        console.log(res)

        // The SOLUTION is here
        self.filename = 'images/' + res;
        self.codeStep = 2;
      })
      .catch(function(error){
        console.log(error)
      })
  },

VueJs模块未找到Axios Post

1 个答案: