vue實作超級簡單的檔案上傳

前兩天剛寫完檔案上傳,在這裡記錄一下。如果不需要算簽名和token認證的話可以把那兩行去掉

html:

<div id="app">
<!--<form enctype="multipart/form-data" action="/auth/fileUploadLocal" method="post">-->
    照片：<input type="file" name="uploadFile"><br/>
    <!--<input type="submit" value="上傳">-->
    <button class="login" style="width: 50px;height: 30px;" @click="fileUpload()">上傳</button>
<!--</form>-->
    <br/>
    <img :src="file.url" style="width: 410px;height: 600px">
</div>
           

js:

new Vue({
    el: "#app",
    methods: {
        fileUpload: function () {
            console.info("sbkjauth:" + localStorage.getItem("sbkjauth"));
            var _this = this;
            var formData = new FormData();
            formData.append("uploadFile", $("input[name='uploadFile']")[0].files[0]);
            axios({
                method: "post",
                url: "/auth/fileUploadLocal" + getSign(),  // 算簽名，不需要可以去掉
                data: formData,
                headers: {
                    'Content-Type': 'multipart/form-data',  // 檔案上傳
                    // 'Content-Type': 'application/x-www-form-urlencoded',  // 表單
                    // 'Content-Type': 'application/json;charset=UTF-8'  // json
                    "sbkjauth": localStorage.getItem("sbkjauth")  // token ，不需要可以去掉
                },
            }).then(function (response) {
                console.log(response);
                alert(response.data.message);
            }).catch(function (reason) {

            })
        },

    }
});
           

如果發現什麼問題請留言，畢竟代碼都是人寫的難免會出錯。