springboot做為后臺服務器
vue+element-ui做為前端
axios實現(xiàn)數(shù)據交互
實質原理利用了js中的FormData的API喊儡，參照了springboot 文件上傳的思路

1.springboot后臺程序

1.1 application.properties

設置單個文件限制為1M，同時上傳限制10MB

server.port=8088
server.servlet.context-path=/neu_his
spring.servlet.multipart.max-file-size=1MB
spring.servlet.multipart.max-request-size=10MB

1.2 處理器程序

@RestController
@RequestMapping("/upload")
public class FileUploadHandler {
    
    @RequestMapping("/photos")
    public List<String> uploadMutipartFile(MultipartFile[] photos, HttpServletRequest request) throws Exception {
        List<String> ps = new ArrayList<String>();
        if(photos == null) {
            ps.add("no files");
            return ps;
        }
        for(MultipartFile f : photos) {
            String old_name = f.getOriginalFilename(); //原始文件名
            String ext_name = old_name.substring(old_name.lastIndexOf(".")); //擴展名
            String new_name = UUID.randomUUID().toString()+ext_name; //利用UUID生成新文件名
            String path = request.getRealPath("/upload/photos"); //上傳位置：工程/static/upload/photos
            File fx = new File(path);
            if(!fx.exists()) {
                fx.mkdirs();
            }
            File n = new File(fx, new_name);
            f.transferTo(n);
            ps.add(n.getPath());
        }
        return ps;
    }
}

2.element-ui項目

已經通過npm安裝了axios和element-ui環(huán)境并做好相應配置辩越，過程參照前面的文章

2.1 設置跨域支持

webpack.config.js中 devServer節(jié)點追加配置矾利，
target：springboot服務器url
changeOrigin: true表示支持跨域訪問
pathRewrite:可以理解為對tatget進行路徑映射

'/neu_his/': {
        target: 'http://localhost:8088/neu_his',
        changeOrigin: true,
        pathRewrite: {
          '^/neu_his': ''
        }
}

2.2 vue核心代碼

關于element-ui上傳組件的官方API：https://element.eleme.cn/#/zh-CN/component/upload
action="" 文件上傳位置姑裂，異步提交時不宜填寫
:auto-upload="false" 設置手動提交
:limit="5" 文件個數(shù)限制
:on-preview="handlePictureCardPreview" 點擊文件列表中已上傳的文件時的鉤子
:on-remove="handleRemove" 文件列表移除文件時的鉤子
:on-change="fileChange" 文件狀態(tài)改變時的鉤子，添加文件男旗、上傳成功和上傳失敗時都會被調用
:multiple="true" 是否支持多文件上傳
:file-list="fileList" 綁定的數(shù)據

<template>
    <div>
        <el-row>
            <el-col :span="12" :offset="6">
                <div id="demo">
                    <el-row>
                        <el-col :span="24">
                            <div>
                                <el-upload
                                  action=""
                                  list-type="picture-card"
                                  :auto-upload="false"
                                  :limit="5"
                                  :on-preview="handlePictureCardPreview"
                                  :on-remove="handleRemove"
                                  :on-change="fileChange"
                                  :multiple="true"
                                  :file-list="fileList">
                                  <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="dialogVisible">
                                  <img width="100%" :src="dialogImageUrl" alt="">
                                </el-dialog>
                            </div>
                        </el-col>
                    </el-row>   
                    <el-divider></el-divider>
                    <el-row>
                        <el-col :span="3" :offset="15">
                            <el-button type="primary" class="btn_pos" @click="uploadImage">上傳</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: []
            };
        },

        methods: {
            handleRemove: function(file, fileList) {
                this.fileList = fileList;
            },
            fileChange: function(file, fileList){
                this.fileList = fileList;
            },
            handlePictureCardPreview: function(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            uploadImage: function(){
                let formData = new FormData();
                for(let i = 0; i < this.fileList.length; i++){
                    formData.append("photos", this.fileList[i].raw, this.fileList[i].name);
                }
                let config = {'Content-Type': 'multipart/form-data'};
                let this_obj = this;
                this.$axios.post('/neu_his/upload/photos', formData, config)
                    .then((res) => {
                        console.log(res.data);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
                
            }
        }
    }
</script>
<style scoped>
    .btn_pos{
        margin-top: 0px;
    }
</style>