（一）文件上传的三种方式

1.表单提交(后台直接接收文件)

<form action="/UploadServlet" enctype="multipart/form-data" method="post">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <input type="file" name="pic">
    <input type="submit">
</form>

2.vue中使用相关组件（elementui)

这种方式是搭建有专门的文件服务器，先将调接口将文件上传给文件服务器，然后将返回的路径上传给表单接口

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
<script>
  export default {
    data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
    }
  }
</script>

3.vue中后台直接接收文件

有时没有专门的文件服务器的时候，后台直接接受文件，应使用formdata的方式提交

<el-form :inline="true" :model="formInline" ref="formInline" enctype="multipart/form-data">
            <el-form-item label="图层名称">
              <el-input v-model="formInline.layerName " placeholder="图层名称"></el-input>
            </el-form-item>
           <el-form-item label="文件"  :rules="[
                { required: true, message: '文件不能为空'},
              ]"
                         prop="file">
               <input type="file" ref="files" @change="getFile()" style=""/>
           </el-form-item>
            <el-form-item>
              <el-button type="primary" size='small' @click="handleSubmit('formInline')">添加</el-button>
              <el-button type="default" size='small' @click="handleback()">返回</el-button>
            </el-form-item>
          </el-form>

上传函数

 handleSubmit(formName){
              this.$refs[formName].validate((valid) => {
                  if (valid) {
                      let formData=new window.FormData();
                      formData.append('file',this.formInline.file)
                      formData.append('layerName',this.formInline.layerName)
                      api.addEntity(formData).then(data=>{
                      })
                  }
              }
}
getFile(){
      this.formInline.file=this.$refs.files.files[0];
 },