python flask+vue实现前后端图片上传_flask+vue文件上传下载的前端 界面

python flask+vue实现前后端图片上传

vue代码如下：

<template>
 <div>
    <input type="file"  @change="handleFileChange"/>
  
       <button @click="uploadFile">上传</button>
       <br>
      <img :src="imageUrl" v-if="imageUrl">
  </div>
</template>

<script>
import axios from "axios";

 
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    handleFileChange(e) {
      this.file=e.target.files[0];
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageUrl = reader.result;
        this.uploadImage(file);
      };
    },

    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);
 
      // 发送文件到后端
      axios.post('http://localhost:5000/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
          .then(response => {
            console.log(response.data);
            // 在这里你可以处理上传成功的逻辑
            if ('error' in response.data) {
              alert(response.data.error);
              return
            }
            // 显示成功消息
            alert(response.data);
          })
          .catch(error => {
            console.error(error);
            // 在这里你可以处理上传失败的逻辑
 
            // 显示错误消息
            alert('文件上传失败');
          });
    }
  }
};
</script>
 
<style scoped>
/* Add your CSS styles here */
div {
  margin: 20px;
}
 
input {
  margin-bottom: 10px;
}
 
button {
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
button:hover {
  background-color: #45a049;
}
</style>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

flask后端代码如下：

from flask import Flask, request, jsonify
import os
from flask_cors import CORS  # 导入CORS模块
 
# 文件存储的目录
UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
 
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
 
# 启用CORS
# CORS(app)
CORS(app, resources={r"/*": {"origins": "*"}})  # 允许所有来源
 
# 设置文件上传大小限制为 16 MB
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB
 
def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
@app.route('/')
def index():
    return 'Hello World!'
 
 
@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return jsonify({'error': '上传的非图片'})
 
    file = request.files['file']
 
    if file.filename == '':
        return jsonify({'error': '没选择图片'})
 
    if file and allowed_file(file.filename):
        print(file)
        print(file.filename)
        filename = file.filename
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'message': '上传图片成功'})
    else:
        return jsonify({'error': '无效'})
 
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

实现效果如下：

然后会在我们后端代码工作目录下保存图片。