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')