vue使用formData進行文件上傳

本文為博主原創，未經允許不得轉載

1.vue頁面

<ux-form ref="formRef" layout="vertical">
    <ux-form-item label="證書名稱">
        <ux-field-decorator name="authorizationDomain">
            <ux-input v-model="form.authorizationDomain" />
        </ux-field-decorator>
    </ux-form-item>
    <ux-form-item label="客戶">
        <ux-field-decorator name="customerId">
            <ux-select v-model="form.customerId" name="customerId"
                placeholder="請選擇客戶">
                <ux-option 
                    v-for="customerInfo in customerArray" 
                    :key="customerInfo.id"
                    :label="customerInfo.name"
                    :value="customerInfo.id">
                </ux-option>
            </ux-select>
        </ux-field-decorator>
    </ux-form-item>
    <ux-form-item label="上傳公鑰">
        <ux-field-decorator name="publicKey">
            <ux-upload name="publicKey" v-model="publicFileList" :multiple="false" control
             @change="onPublicChange" :before-upload="beforeUpload">
                <ux-button icon="upload">瀏覽</ux-button>
                注：公鑰：crt|pem|cer 
            </ux-upload>
        </ux-field-decorator>
    </ux-form-item>
    <ux-form-item label="上傳私鑰">
        <ux-field-decorator name="privateKey">
            <ux-upload name="privateKey" v-model="privateFileList" control
            @change="onPrivateChange" :before-upload="beforeUpload ">
                <ux-button icon="upload">瀏覽</ux-button>
                注：私鑰：key 
            </ux-upload>
        </ux-field-decorator>
    </ux-form-item>
</ux-form>

2.上傳文件時的校驗

onPublicChange({fileList}) {
    try {
        var file = fileList[fileList.length - 1];
        if (file && !/.(crt|pem|cer)$/.test(file.name)){
            UxMessage.warning('請上傳正確格式的公鑰');
            return;
        }
        this.publicFileList = fileList.slice(fileList.length - 1, fileList.length);
    } catch(e) {
        console.log(e);
    }
},    
onPrivateChange({fileList}) {
    try {
        var file = fileList[fileList.length - 1];
        if (file && !/.(key)$/.test(file.name)){
            UxMessage.warning('請上傳正確格式的私鑰');
            return;
        }
        this.privateFileList = fileList.slice(fileList.length - 1, fileList.length);
    } catch(e) {
        console.log(e);
    }
}, 

3.使用formData上傳后台：

 //創建 formData 對象
let formData = new FormData();
//多個文件上傳
formData.append("publicFile", publicKey);  // 文件對象
formData.append("privateFile", privateKey);  // 文件對象  
formData.append("authorizationDomain", values.authorizationDomain);
formData.append("customerId", values.customerId);            
            
 _this.$http.post('/certificate/updateCheck.do',formData)
 .then(function (response) {            
    }    

4.java代碼：

    @ResponseBody
    @RequestMapping(value = "/updateCheck", method = {RequestMethod.POST})
    public RequestResult updateCheck(Certificate certificate) {
            }

public class Certificate {        
        private Long customerId;

        private String authorizationDomain;
        
        private MultipartFile publicFile;

        private MultipartFile privateFile;            
    }    

 5.效果圖：