CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Simon Brami
Simon Brami

Reputation: 159

VueJs Module Not found Axios Post

Here is my problem, I'm using VueJs and when I'm posting an image to my server, my server modify this image and create another one and returns me the name of the new file, but then occurs the error when I try to require() my new img with the new path... here is my 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>

There is my filepath declaration : 

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,
    }
  },

And there is my posting my function where I get a filename.jpg for example :

  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)
      })
  },

And here is the error on my console :

Error: Cannot find module './goku.jpg'. at webpackContextResolve (.$:24) at webpackContext (.$:19) at upload.vue?4b64:134 at

I presume it might be that vueJs require doesn't support to call a new file at runtime because it stores everything in dist/ ?

ps: the first default-image.png is well found by vuejs.

Thanks for your time ...

Simon

Upvotes: 2

Views: 229

Answers (1)

Simon Brami
Simon Brami

Reputation: 159

I finaly found a way to show up my img whitout using require. Instead of saving my image in /image, I store it in /wwwroot/images/ which is a subdirectory from Vuejs webpack RootPath. Doing this, I can now access to my image directly from the Url for example : 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)
      })
  },

Upvotes: 1

Related Questions