Vue+Flask实现图片传输功能

【Vue+Flask实现图片传输功能】

本攻略将分为两条示例来详细讲解如何使用Vue和Flask实现图片传输功能。

【示例一】

在本例中，我们将使用Flask作为后端，使用Vue作为前端，来实现图片上传和展示功能。

1. 前端Vue代码

首先，在Vue的模板中添加一个上传文件的input标签和一个展示图片的img标签，如下所示：

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

其中，@change方法用于监听文件上传事件，handleFileChange方法用于处理图片上传文件，并通过Vue的data数据绑定方式将上传的图片赋值给imageUrl，通过v-if控制是否展示图片。

1. 前端Vue脚本代码

在Vue的脚本代码中实现图片上传和展示的逻辑，如下所示：

<script>
export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    handleFileChange(e) {
      const file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.imageUrl = reader.result;
        this.uploadImage(file);
      };
    },
    uploadImage(file) {
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/upload', formData, {
        headers: { 'content-type': 'multipart/form-data' },
      }).then((res) => {
        console.log(res);
      }).catch((err) => {
        console.log(err);
      });
    },
  },
};
</script>

其中，handleFileChange方法中使用FileReader读取上传的图片文件并将结果赋值给imageUrl，并调用uploadImage方法将图片上传给后端；uploadImage方法中将图片以FormData的形式封装，并通过axios发送post请求将图片上传到后端。

1. 后端Flask代码

在Flask中实现图片上传和展示的逻辑，如下所示：

from flask import Flask, request, jsonify, send_from_directory
from werkzeug.utils import secure_filename
import os

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

@app.route('/upload', methods=['POST'])
def upload():
    file = request.files['file']
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return jsonify({'filename': filename})
    else:
        return jsonify({'error': 'Invalid file format'})

@app.route('/uploads/<filename>')
def send_image(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

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

其中，ALLOWED_EXTENSIONS用于限制上传的文件格式，allowed_file函数用于判断上传的文件格式是否符合要求；upload路由接口用于接收前端上传的图片文件，并将文件保存到本地UPLOAD_FOLDER目录；send_image路由接口用于将保存在本地的图片文件发送给前端展示。

【示例二】

在本例中，我们将使用Flask作为前端和后端的桥梁，来实现图片上传和展示功能。

1. 前端Vue使用axios请求上传图片

首先，在前端Vue组件中使用axios请求上传图片，在上传文件时，设置axios请求的头部为multipart/form-data，将图片文件通过FormData传输给后端：

axios.post('/api/file', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
  .then(response => {
    // 上传成功处理
  }).catch(error => {
    // 上传失败处理
  });

1. 后端Flask接收并存储图片

使用Flask框架中的request.files.get()方法在后端接收前端传过来的图片文件，并将其保存到本地：

from flask import Flask, request
import os

app = Flask(__name__)

@app.route('/api/file', methods=['POST'])
def upload_file():
    file = request.files.get('file')
    if file:
        file.save(os.path.join('static', file.filename))
        return 'success'
    else:
        return 'error'

其中，os.path.join()函数用于拼接存储路径和文件名称，将文件存储到服务器的static目录下。存储成功后返回success，否则返回error。

1. 前端Vue展示上传的图片

首先，在前端Vue组件中定义一个img元素用于展示上传的图片：

<template>
  <div>
    <input type="file" @change="uploadFile">
    <img :src="imageUrl" v-show="imageUrl">
  </div>
</template>

然后在Vue的script中调用Flask服务中的图片路径：

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      getImageUrl(filename) {
        return `/static/${filename}`;
      },
      uploadFile(e) {
        var file = e.target.files[0];
        if (!file) return;
        var formData = new FormData();
        formData.append('file', file);
        axios.post('/api/file', formData, { headers: { 'Content-Type': 'multipart/form-data' } })
          .then(response => {
            this.imageUrl = this.getImageUrl(file.name); // 获取图片路径
          }).catch(error => {
            console.log(error)
          });
      }
    }
  }
</script>

其中，getImageUrl用于将Flask服务中的图片路径传给前端Vue组件；uploadFile用于上传文件，并将图片路径赋值给imageUrl，控制前端的img标签的展示。

【总结】

通过以上两个例子的介绍，我们可以了解到Vue和Flask都是非常优秀的前后端开发框架，结合使用可以为我们的项目提供很多便利，为用户提供更加良好的使用体验。在实际开发中，应根据具体的需求综合考虑各种技术手段的使用。