處理文件上傳和怎麼處理對象的key和value都是變量的情況

寫在前面

一直不更行任何的東西，畢竟年終了，項目比較着急，沒有什麼時間寫，我們這老家的天氣也着實冷的狠，真的是不想碰筆記本，但是不更新吧也不行，今天簡單的說一下幾個點，一個是文件上傳，一個是怎麼處理key和value都是變量的情況。## vue文件上傳文件上傳一直是我們處理數據的時候的一個比較煩人的點，原因是文件本身屬性比較多，很多時候後端要求的東西是不一樣的，那麼我們也要做出對應的處理上傳纔可以，否則是不行的，今天我們就舉個例子說一下文件怎麼上傳。

效果圖

這個是我我做出來的一個效果圖，我們在寫的時候呢需要注意幾個點.

• 第一是一般情況下彈框提示用戶操作的時候後面事不可以被操作的，也就是說會有一個蒙層在上面
• 第二個點就是我們一般上傳文件使用的inout的type=file屬性進行拉起選擇文件的，這個時候他自帶的其實是這個樣子的，
• 
  那這個是肯定不對的，怎麼辦呢？所以這裏也是需要我們處理掉的一個點
• 第三就是我們點擊取消或者確認按鈕的時候其實是將蒙層和當前的彈框一起全部取消掉纔是正確的
• 第四是我們上傳的時候文件格式的問題。如果不處理文件格式，上傳的時候會導致一直給的參數都是空值。

下面就針對這幾個點，我們簡單的說一下，文件上傳的時候需要怎麼處理。

頁面源碼

<div class="mongolia_tip" v-show="mongolia_tip" @click="hidden_card">
        <div @click.stop>
            <el-card class="upload_flag_tip">
                <div>
                    謹慎使用：上傳文件配置酒店信息時，會清除當前酒店的所有房間信息，
                    僅建議在第一次配置酒店時使用。說明：請使用系統提供模板
                </div>
                <button class="btn_cancel" @click="opt_upload('cancel')">取消</button>
                <input type="button" class="btn_btn" value="確認" @click="opt_upload('yes')" />
                <input type="file" class="btn_yes" ref="file" @click="opt_upload('yes')" @change="preview($event)" />
            </el-card>
        </div>
    </div>

css樣式源碼

.mongolia_tip {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1002;

}

這個是遮罩層的樣式，也就是我之前提到的彈出框的時候不可以直接彈出來，還要保證的是後面的不可以點擊，這樣做出來的效果纔是比較理想的一個效果。
JS源碼

/**
         * @opt_upload 操作上傳
         */
        opt_upload(opt) {
            if (opt === 'cancel') {
                this.upload_flags = false;
                this.mongolia_tip = false;
            } else {
                this.upload_flags = false;
                this.mongolia_tip = false;
            }
        },
        /**
         * @preview 選擇文件
         */
        preview(event) {
           //將文件本身獲取到
            let files = this.$refs.file.files;
            let formData = new FormData();
            formData.append("file", files[0])
            this.$axios({
                method: 'post',
                url: this.api.api_jjb_9114 + 'room/room_status/add_room_map_with_csv/',
                headers: {
                    'Content-type': 'multipart/form-data'
                },
                data: formData
            }).then((res) => {
                console.info(res)
                if (res.data.message === 'success') {
                    this.hintInfo('success', '操作成功')
                } else {
                    this.hintInfo('warning', '操作失敗')
                }
            }).catch((err) => {
                console.error(err)
            })
            //var file = event.target.files
            //console.info(file)
        },

這裏簡單的解釋一下上面的代碼，其實沒有什麼高深的東西，都是一些基本的，首先是控制遮罩層的顯示與隱藏的，第一段函數，下面的是控制上傳的請求接口，沒有別的什麼功能。這裏需要注意一點的是下面這段代碼：

let formData = new FormData();
formData.append("file", files[0])

簡單的解釋一下這裏爲什麼一定要做FormData的處理，不使用舊有的application/x-www-form-urlencoded：因爲此類型不適合用於傳輸大型二進制數據或者包含非ASCII字符的數據。平常我們使用這個類型都是把表單數據使用url編碼後傳送給後端，二進制文件當然沒辦法一起編碼進去了。所以multipart/form-data就誕生了，專門用於有效的傳輸文件。
這裏基本上就可以將文件直接傳遞給後端了，也是沒有問題的。

怎麼處理key和value都是變量的情況

這個真的要說一下，這個是很頭疼的一件事，爲什麼這麼說呢，說來話長，好好的數據結構不用，非要使用一些奇葩的數據結構，不過回頭想想也是一件好事，不是這個數據結構的話，也不會出現這篇文章了，下面就簡單的說一下怎麼回事。
我們需要的結果是這樣的：

源代碼是這樣的：

let source_data = [{
	name: "JACK",
	sex : 25
},{
	name: "MARRY",
	sex : 26
},{
	name: "JIM",
	sex : 29
},{
	name: "CLEARLOVE",
	sex : 28
},{
	name: "MACKER",
	sex : 24
},{
	name: "HERRY",
	sex : 22
	}]

console.info("源數據：")
console.info(source_data)
	
let result_data = {}

source_data.map((resp,index) => { 
     result_data[resp.name] = resp.sex
})
console.info("結果數據：")
console.info(result_data)

這裏就是一個典型的對象裏面的keyvalue值都是一個變量的情況，這種數據格式不是很多，但是也是一個可以遇見的格式，所以還是需要我們注意一下的。

寫在最後

最近公司和個人的事情都比較多，帖子更新的着實是很慢，其實我自己也是很着急的，但是時間有限，真的是沒有什麼辦法，確實也找不到一些好一點的值得寫的文章，不想爲了更新而更新，那這個平臺就沒有任何的意義了，所以這裏還是想說一下就是雖然更新的慢，但是寫的都是我自己遇到的一些真實存在的一些問題，希望可以真實的幫助到一些和我一樣的人，不再同一個問題上浪費更多的時間和精力，謝謝閱讀。