VUE|ElementUI el-upload实现文件上传|服务器交互

1. VUE代码

<el-upload
   class="upload-file"
   :action="actionUrl" // action为服务器链接(后端接口)
   accept="file/*"  // 上传的文件保存的目录以及接受上传的文件类型
   multiple  //  	是否支持多选文件
   :limit="3"  // 最大允许上传个数
   :on-change="handleChange"  // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
   :on-remove="handleDelete"  // 文件列表移除文件时的钩子
   :file-list="upload_filelist">  // 上传的文件列表
   <el-button size="small" type="primary">点击上传</el-button>
   <div slot="tip" class="el-upload__tip">只能上传py文件,大小不超过0.5M,运行时间不超过10s</div>
 </el-upload>

<script>
import Vue from 'vue'
export default{
	name:"xxxxxx",
	data(){
		return {
      upload_filelist: [
          // {
          //   name: '1',
          //   url: ''
          // }, {
          //   name: '2',
          //   url: ''
          // }
      ],
      actionUrl: this.HOST + '/upload/',
		}
	},
</script>

2. Flask

@app.route('/upload/', methods=['POST'])
def upload_monitor_script():
    if request.method == 'POST':
        f = request.files['file']
        filename = secure_filename(f.filename)
        # 验证文件格式
        types = ['py', 'pyc']
        if filename.split('.')[-1] in types:
            # 保存图片
            file_path = os.path.join(BASE_DIR, 'file/{0}'.format(filename))
            f.save(file_path)
            # 返回给前端结果
            return json.dumps(
              {'code': 200, 'url': url_for('download_file', filename='{0}'.format(filename), _external=True)})
        else:
            return json.dumps({'error': '文件格式不合法', 'code': 400})
    else:
        return json.dumps({'code': 405, 'error': '请求方式不正确'})


@app.route('/download/', methods=['GET'])
def download_file(filename):
    """定义函数完成文件/图片的读取操作"""
    # 打开文件目录
    path = os.path.join(BASE_DIR, 'file/{0}'.format(filename))
    # 如果存在文件，读取，返回图片数据
    if os.path.exists(path):
        f = open(path, 'rb+')
        data = f.read()
        f.close()
        return data
    else:
        return '404'

参考：
https://www.cnblogs.com/qdclub/p/10547611.html

https://blog.csdn.net/qq_38543537/article/details/106645091

https://blog.csdn.net/qq_43317529/article/details/83096447?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-1.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.2&utm_relevant_index=4

https://iapex.blog.csdn.net/article/details/103857779?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4.pc_relevant_paycolumn_v3&utm_relevant_index=8