Vue and flask simple file upload, add filter and return

Click the upload button, or drag and drop the picture to upload, after the upload is successful, the picture will be displayed on the webpage

 

 

After back-end processing, return the processed image

 

 

Use the element upload component, the action is the upload api, and the drag attribute is drag and drop upload

After the upload is successful, the server returns the processed image link

<template>
  <el-upload
    class="avatar-uploader"
    drag
    action="http://localhost:80/upload"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
  export default {
    name: "up",
    data() {
      return {
        imageUrl: ''
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);

        this.$refs.img.src = res
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    /*width: 100%;*/
    height: 100%;
    /*display: block;*/
  }
</style>

 

Backend, use pil, convert the picture to black and white, save it, and then return to the picture link

@app.route("/upload", methods=['post', 'get'])
def upload():
    f = request.files['file']
    print(f.filename)
    f.save(f.filename)

    image_file = Image.open(f.filename)  # open colour image
    image_file = image_file.convert('1')  # convert image to black and white
    path = './static/result.png'
    image_file.save(path)
    return 'http://localhost/static/result.png'

 

 

It may be better to return base64 encoding or a file, but it seems to be unsuccessful. . . .