Vue（项目配置iview的upload插件上传文件 ）+ Python flask 上传文件

 

前端效果展示

 

 

 

前端代码

1、ivew upload组件

<Upload
      type="drag"   // 支持拖拽
      multiple      // 支持多文件上传 
      :max-size="10240000"  // 设置上传最大量
      :action="'https://upload.qiniup.com'" // 七牛服务器地址，详见下面图片
      :show-upload-list="false" // 是否显示上传列表
      :data="uploadParams"      // 上传参数配置
      :default-file-list="[]"   // 显示默认列表，之前上传的文件列表
      :on-success="handleSuccess"   // 上传成功回调函数
      :before-upload="beforeUpload" // 上传之前回调函数，可以在这里设置上传的参数
      :on-remove="removeFile"       // 删除文件回调函数
      :on-preview="previewFile"     // 点击上传列表回调函数
      :on-progress="progressFile"   // 上传进度回调函数
      :on-change="changeFile"       // 选择文件改变回调函数
      style="width: 100%;"
      >
      <i class="iconfont icon-add1 icon"></i>{{buttonText ? buttonText : '点击或者拖拽到此上传'}}
    </Upload>

 

回调相关函数

data () {
    return {
        uploadParams: {}
    }
}
methods: {
    beforeUpload (request) {
      console.log(request, 'beforeUpload')
      // **注意这里的参数必须通过属性赋值，如果直接修改整个uploadParams是无效的。**
      // 上传之前设置上传参数,
      this.uploadParams.token = this.$store.state.upload_token
      // 七牛response hash key的值自定义，后面如果需要浏览或者下载都需要这个地址，如果key不定义，那么七牛生成的key === hash的值
      this.uploadParams.key = request.name
      // 整个上传肯定是一个组件，所以需要将值反馈给父界面
      this.$emit('completeFun', [request])
    },
    handleSuccess (request, file, list) {
      console.log(file, list, '上传成功')
      // 这里就能拿到七牛返回的response信息（hash, key)然后拼接服务器地址，就可以访问了
      this.imageUrl = this.$store.getters.upload_url + request.key
      console.log(request, this.$store.getters.upload_url + file.name, '获取图片地址')
      this.$emit('successFun', [file, list, this.imageUrl])
    },

}

 

后端代码

1.文件上传

def upload():  # 接收前端上传的一个分片
    """
    文件上传
    :return:
    """
    f = request.files['file']

    md5 = request.form.get('fileMd5')
    chunk_id = request.form.get('chunk', 0, type=int)
    #filename = '{}-{}'.format(md5, chunk_id)
    filename = f.filename
    upload_file = request.files['file']

    upload_file.save('{}/upload/{}'.format(settings.PROJECT_DIR, filename))

    return JsonResponse.response(code=1, data={"upload_part": True})

 

 

2.获取文件列表

@fileupload.route('/file/list', methods=['GET'])
def file_list():
    """
    获取文件列表
    :return:
    """

    files = os.listdir("{}/upload/".format(settings.PROJECT_DIR))  # 获取文件目录
    print(files)
    # files = map(lambda x: x if isinstance(x, str) else x.decode('utf-8'), files)  # 注意编码
    # print(files)
    # return render_template('./list.html', files=files)
    return JsonResponse.response(code=1, data={"files": files})

 

3.文件下载

@fileupload.route('/file/download/<filename>', methods=['GET'])
def file_download(filename):
    """
    文件下载
    :param filename:
    :return:
    """

    def send_chunk():  # 流式读取
        store_path = './upload/%s' % filename
        with open(store_path, 'rb') as target_file:
            while True:
                chunk = target_file.read(20 * 1024 * 1024)
                if not chunk:
                    break
                yield chunk

    return Response(send_chunk(), content_type='application/octet-stream')