Skip to content

Instantly share code, notes, and snippets.

@ambrizals
Created November 7, 2019 02:49
Show Gist options
  • Save ambrizals/821829df85cbf0ab66ce568b60ebefda to your computer and use it in GitHub Desktop.
Save ambrizals/821829df85cbf0ab66ce568b60ebefda to your computer and use it in GitHub Desktop.
Original Code
uploadCover() {
this.progressDialog = true
let formData = new FormData()
formData.append('cover_article', this.imgCover)
upload.post('atk/posts/cover/'+this.params, formData).then((res) => {
this.form.coverArticle = res.data
this.imgCover = null
this.progressDialog = false
this.updateCover = false
}).catch(() => {
this.progressDialog = false
this.updateCover = false
})
},
@ambrizals
Copy link
Author

Boleh lihat formnya om, takutnya entype belum di set enctype="multipart/form-data" hehe 🙉

Saya malah gak pake tag

malah pake ini :

		<v-dialog v-model="updateCover" persistent max-width="350">
			<v-card>
				<v-card-title class="headline">Upload Cover</v-card-title>
				<v-card-text>
					Silahkan masukkan atau pilih file yang ingin dijadikan cover gambar
				</v-card-text>
				<v-card-text>
					<v-file-input label="Cover Images" prepend-icon="mdi-camera" accept="image/png, image/jpeg, image/bmp" v-model="imgCover"></v-file-input>
				</v-card-text>
				<v-card-actions>
				<div class="flex-grow-1"></div>
					<v-btn color="green darken-1" text @click="updateCover = false">Tutup</v-btn>
					<v-btn color="green darken-1" text @click="uploadCover()">Upload</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog> 

Karena dari file uploadService.js saya definisikan content-type="multipart/form-data"

import axios from 'axios';
import storageService from './storageService';

export class uploadService {
    // Create Request Configuration
    constructor() {
        this.headers = {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'multipart/form-data'
        }
        this.axios = axios.create({
            baseURL: 'https://www.example.com/'
        });

        this.axios.interceptors.request.use(
            config => {
                // If user is login
                if (storageService.getToken()) {
                    config.headers['Authorization'] = 'Bearer ' + storageService.getToken();
                }
                return Promise.resolve(config);
            },
            error => {
                return Promise.reject(error);
            }
        );
    }
    post(url, data) {
        return this.axios.post(url, data, { crossdomain: true });
    }
}
export default new uploadService();

@zhiephie
Copy link

zhiephie commented Nov 7, 2019

Oh iya, kalau pakai ini axios/axios#318 (comment)
Bingung juga gatau code bagian uploadnya.

@zhiephie
Copy link

zhiephie commented Nov 7, 2019

atau coba pakai

Kalau di bagian ini
<v-file-input label="Cover Images" prepend-icon="mdi-camera" accept="image/png, image/jpeg, image/bmp" v-model="imgCover"></v-file-input>
dirubah ke
<v-file-input label="Cover Images" prepend-icon="mdi-camera" ref="file" accept="image/png, image/jpeg, image/bmp" v-model="imgCover"></v-file-input>

asumsi bagian data seperti ini

 data: {
     file: "",
  },

dan bagian method uploadCover
add ini

this.file = this.$refs.file.files[0];
let formData = new FormData();
formData.append('file', this.file);

@ambrizals
Copy link
Author

ambrizals commented Nov 7, 2019

atau coba pakai

Kalau di bagian ini
<v-file-input label="Cover Images" prepend-icon="mdi-camera" accept="image/png, image/jpeg, image/bmp" v-model="imgCover"></v-file-input>
dirubah ke
<v-file-input label="Cover Images" prepend-icon="mdi-camera" ref="file" accept="image/png, image/jpeg, image/bmp" v-model="imgCover"></v-file-input>

asumsi bagian data seperti ini

 data: {
     file: "",
  },

dan bagian method uploadCover
add ini

this.file = this.$refs.file.files[0];
let formData = new FormData();
formData.append('file', this.file);

Errornya pun masih sama untuk cara yang ini.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment