flask实现图片的上传和保存到本地

40 阅读1分钟

1,前端

<template>
  <div>
    <div>
      <input type="file" @change="handleFileUpload">
      <button @click="uploadFile">Upload</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name:'uploadTest2',
  methods: {
    handleFileUpload(event) {
      this.selectedFile = event.target.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('img', this.selectedFile);
      console.log('formdata---->',formData)
      axios.post('http://127.0.0.1:8081', formData)
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
    }
  },
  data() {
    return {
      selectedFile: null
    };
  }
}
</script>

2,后端

import os
from flask_cors import CORS
from flask import Flask, request

app = Flask(__name__)
CORS(app)
@app.route('/', methods=['POST'])
def hello():
    # 获取上传的文件
    img = request.files['img']
    # 定义并创建保存图片的文件夹
    upload_dir = './uploads'
    os.makedirs(upload_dir, exist_ok=True)
    # 保存图片到本地
    img.save(os.path.join(upload_dir, img.filename))
    # 返回响应
    return 'Upload success!'



if __name__ == '__main__':
    app.run(port=8081)

image.png

image.png