vue 上傳文件 和 下載文件

Vue上傳文件，沒必要使用什麼element 的uplaod, 也不用什麼npm上找的我的寫的包，就用原生的Vue加axios就好了， 廢話很少說，直接上代碼：
html:

<input type="file" value="" id="file" @change="uploadConfig">

注意這裏的type是file，就表示是上傳文件了

js:

      uploadConfig(e) {
        let formData = new FormData();
        formData.append('file', e.target.files[0]);
        let url = this.$store.state.path + "api/tools/handle_upload_file";
        let config = {
          headers:{'Content-Type':'multipart/form-data'}
        };
        this.$axios.post(url,formData, config).then(function (response) {
          console.log(response.data)

        })

      }

1. vue裏面的axios，若是要用這種方式寫，注意請求方式是method, 而不是 type:

this.$axios({
          url:this.$store.state.path + "api/tools/handle_upload_file",
          method: "POST",　　　　//  這個地方注意
          data: formData,
          file:e.target.files[0],
          processData:false,
          contentType:false,
          success:(response) => {
            console.log("upload_success_response:", response)
        }
        })

2. 傳輸文件類型，必須加上請求頭：   headers:{'Content-Type':'multipart/form-data'}
3. 注意axios的用法

後端（python)：

def handle_upload_file(request):
    if request.method == "POST":

        file = request.FILES.get("file")　　　　# 獲取文件要用request.FILES
        print file

        for chunk in file.chunks():　　　　　　# 分塊讀取二進制文件的方法
            print chunk

    return HttpResponse(json.dumps({"meta": 200, "msg": "ok"}))

 

 

 

 

關於下載文件，有點標題黨了，實現文件下載只須要js的幾行代碼，和vue還真是沒多大關係，讓你的下載按鈕點擊後觸發下面的函數就好了
函數內容：

let aTag = document.createElement('a');
let blob = new Blob([content]);　　// 這個content是下載的文件內容，本身修改
aTag.download = file_name;　　　　　　// 下載的文件名
aTag.href = URL.createObjectURL(blob);
aTag.click();　　　　　　　　　　　　　　
URL.revokeObjectURL(blob);