0 
    <template>
        <div class="upload">
          <form enctype="multipart/form-data" @submit.prevent="submitForm">
            <input type="file" name="avatar" @change="avatarChange" /><br />
            <input type="file" multiple name="imageProduct" @change="changeProduct" /><br />
            <input type="file" multiple name="imageInvoice" @change="changeInvoice" /><br />
          </form>
        </div>
    </template>
            data () {
               return: {
                 imageProduct: [],
                 avatar: null,
                 imageInvoice: [],
               }
            },
            methods: {
                avatarChange() {
                  let avatar = e.target.files[0];
                  this.avatar = avatar;
                }
                changeProduct() {
                  //
                }
                changeInvoice() {
                  //
                },
                submitForm() {
                  // pass image value through laravel through axios
                }
            }

Is there a way to combine these three methods together, and get the information of single image input and multiple image input at the same time? Thanks.

Improve this question
7
  • You can use a form with a submit button. Commented Jul 23, 2021 at 7:49
  • Can you tell me more? thank Commented Jul 23, 2021 at 7:53
  • You won't even need a form, I think. A button will do. Add a method that will run on button press and handle all images. Please edit your question when you run into problems. Commented Jul 23, 2021 at 8:04
  • okay. I understand. I have re-edited the question Commented Jul 23, 2021 at 8:12
  • 1
    You can look at this question. stackoverflow.com/questions/68493240/… Commented Jul 23, 2021 at 8:19

1 Answer 1

Reset to default
0

I tested the code

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" name="a" onchange="changeFile(this)" />
    <input type="file" name="b" onchange="changeFile(this)" />
    <input type="file" name="c" multiple onchange="changeFile(this)" />
    <script>
      var a, b, c;
      function changeFile(e) {
        const { name, files , multiple } = e;
        fileLength = files.length;
        const hasName = ["a", "b", "c"].includes(name);
        if (hasName && fileLength) {
          //if (fileLength === 1) this[name] = files[0];
          //else this[name] = files;
          if (multiple) this[name] = files;
          else this[name] = files[0];
        } else console.log("no file");
        console.log('a: ', a);
        console.log('b: ', b);
        console.log('c: ', c);
      }
    </script>
  </body>
</html>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

if you check the condition fileLength === 1, the input file multiple when selecting an image, its length is also equal to one, should we check name instead of length ?
e.multipleYou can use multiple instead of the length, I changed my answer, Name is flexible, so we can't write it in the code, So our code can be reused.
fileLength is not defined .I get the same error when I run the above code.
const { name, files , multiple } = e, fileLength = files.length; or const fileLength = files.length

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.