Я не буду отправлять форму для загрузки Javascript - PullRequest
0 голосов
/ 18 октября 2018

Какая часть функции отправляет мою форму при загрузке изображения?Я не буду отправлять форму для загрузки изображения.Я хочу на кнопку отправки.Какая часть кода создает проблемы?Думаю, этот код работает нормально, но я хочу отправить форму для загрузки фотографий автоматизации.Кроме того, какая часть моего кода может не нуждаться во мне на этот раз?

uploadFile(event) {
              const formData = new FormData()
                          formData.append('image', event.target.files[0])
              axios({
                method: "post",
                url: "linkmyapi",
                data: formData,
                headers: {
                  "Content-Type": "multipart/form-data"
                }
              })
                .then(response => {
                  this.items.push(response.data);
                  this.image = "";
                            this.profile_image = ''
                            this.loading = false
                            this.dragAndDropUpload = false
                            this.styleObject.backgroundColor = ''
                })
                .catch(error => {
                  this.loading = false;
            },
            onDropFile(e) {
                        this.dragAndDropUpload = true
                        e.stopPropagation()
                        e.preventDefault()
                        let files = e.dataTransfer.files
                        this.createFile(files[0])
                    },
                    onChangeFile(e) {
                        // this.manualUpload = true
                        let files = e.target.files;
                        this.createFile(files[0])
                    },
                    createFile(file) {
                        if (!file.type.match('image.*')) {
                            alert('Select an image')
                            return
                        }
                        let reader = new FileReader()
                        let vm = this
                        reader.onload = function (e) {
                            vm.profile_image = e.target.result
                        }
                        reader.readAsDataURL(file)
                        this.uploadFile(event)
                    },
                    removeFile() {
                        this.profile_image = ''
                        this.styleObject.backgroundColor = ''
                    },
                    onDragOver () {
                        this.styleObject.backgroundColor = 'rgba(0, 160, 223, 0.4)'
                    },
                    onDragLeave () {
                        this.styleObject.backgroundColor = ''


    },

HTML - это

  <div class="upload-container">
    <div
        :style="styleObject"
        class="drop drop-profile"
        id="2"
        @dragover.prevent="onDragOver()"
        @dragleave.prevent="onDragLeave()"
        @drop="onDropFile($event)"
        :class="{ 'loading-image': loading }">

        <label v-if="!profile_image" class="label-text label-text-profile">
            Choose or drag
            <br> and drop your
             profile image
             here
             <br>
            <input
                type="file"
                name="profile_image"
                @change="onChangeFile($event)">
        </label>

        <div v-else class="hidden">
            <img :src="profile_image" alt="Profile image" class="image-profile" />

            <div v-if="!loading" class="lc-loupe-trash-container">
                <div @click="removeFile" class="lc-trash"></div>
            </div>
        </div>
    </div>

    <div v-if="loading" class="spinner-container">
        <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

1 Ответ

0 голосов
/ 18 октября 2018

Ваш вопрос не так понятен, вы можете попробовать отредактировать его, чтобы он был немного понятнее?Вы хотите автоматически загрузить onDrop в область перетаскивания или вы хотите загрузить onClick of submit button?

...