Sending an Image From Vue Js to Flask Restful API

Question

I am trying to upload a from on my VueJS client to my Flask Server. I am sending the image in a FormData which includes other form fields. I am able to access the other form fields. However, whatever that is send to my server does not seem to be able to be be saved in my flask app. If it helps the data is being sent to my api as a immutable multi-dictionary.

Vuejs

<template>
<ValidationObserver v-slot="{ handleSubmit }">
  <b-form @submit.prevent="handleSubmit(onSubmit)" enctype="multipart/form-data">
    <ValidationProvider rules="required" v-slot="{ errors }">
          <b-form-group
            id="price-group"
            label="Price:"
            label-for="price-input"
          >
          <b-form-input
              id="price-input"
              v-model="productForm.price"
              type="text"
              required
              placeholder="Enter price of the product..."
            ></b-form-input>
          </b-form-group>
          <span>{{ errors[0] }}</span>
        </ValidationProvider>
        <b-button-group>
        <b-button
            type="submit" variant="primary">Submit</b-button>
        </b-button-group>
</template>

<script>
import axios from 'axios';

export default {
data() {
return {
  productForm: {
    price: '',
    image_set: {
      coverphoto: null,
    },
    showMessage: false,
    notification: '',
  },
  coverphotoURl: '',
};
},
methods: {
createProduct(payload) {
  const path = 'http://127.0.0.1:5000/new_products';

  axios.post(path, payload)
    .then(() => {
      this.showMessage = true;
      this.notification = 'Registration Successful';
    })
    .catch(() => {
      this.showMessage = true;
      this.notification = payload;
    });
},
initForm() {
  this.productForm.price = '';
  this.productForm.image_set.coverphoto = null;
},
onSubmit() {
  const payload = new FormData();
  payload.append('price', this.productForm.price);
  payload.append('coverphoto', this.productForm.image_set.coverphoto, this.productForm.image_set.coverphoto.name);

  this.createProduct(payload);
},
onFileChange(e) {
  const file = e.target.files[0];
  this.productForm.image_set.coverphoto = file;
  this.coverphotoURl = URL.createObjectURL(file);
},
</script>

Flask File

@app.route('/new_products', methods=['POST'])
def new_products():
    if request.method == 'POST':
        data = request.form

        if request.files:
            images = request.files.getlist('coverphoto')
        else:
            return jsonify({'message' : 'No File Uploaded'})
        
        print(images) # Print images will return [<FileStorage: 'Coffee Roasters.jpg' ('image/jpeg')>]


        newProduct = Products(str(uuid.uuid4()), data['name'], data['tasting_notes'], data['origination'], data['pairing'], data['price'])

        try:
            db.session.add(newProduct)
            db.session.commit()

            filename = secure_filename('coverphoto.jpg')
            img_path = os.path.join('/',app.config['UPLOAD_FOLDER'], filename)
            images.save(img_path)
            new_img = Images(str(uuid.uuid4()), img_path, newProduct.id)
        
            db.session.add(new_img)
            db.session.commit()

            return jsonify({'message' : 'Upload Successful'})
        
        except:
            return jsonify({'message' : 'Upload Unsuccessful'})

It how can i convert [<FileStorage: 'Coffee Roasters.jpg' ('image/jpeg')>] to something that flask is able to save? Thank you for yur help.

score 0 · Answer 1 · answered Jul 18 '20 at 13:06

0

I guess you should set the proper header in Axios to be able to retrieve the file on the server. Use this:

 headers: {'Content-Type': 'multipart/form-data' }
 })

answered Jul 18 '20 at 13:06

mostafa

324
2
8

Hi, I have made the change however it still gives me the same response which does not allow me to save it in the API @mostafa – tristan lim Jul 18 '20 at 13:27
ImmutableMultiDict([('coverphoto', )]) this there a way to save this? – tristan lim Jul 18 '20 at 13:27
Well if you are receiving the request object on the server then there must be no problem with your frontend. But Definitely check out this question two. https://stackoverflow.com/questions/52873076/flask-request-files-returns-immutablemultidict – mostafa Jul 18 '20 at 16:37

Sending an Image From Vue Js to Flask Restful API

1 Answers1