vue el-upload单独上传/表单一起上传

一、单个文件上传

elementUI上的示例方法

其中action为必填参数，是文件上传的地址；

 <el-upload
  class="upload-demo"
  action="https://xxxx/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="3"
  :on-exceed="handleExceed"
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

二、与表单一起上传 在组件el-upload，其中action为必填参数，为上传文件的地址，若没有此地址设为空或#即可；

auto-upload是否在选取文件后立即进行上传，默认为true；

on-change文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用，方法写在这里； show-file-list是否显示已上传文件列表，默认为true

<el-upload
    ref="upload"
    class="upload-demo"
    action="#"  
    accept=".xlsx, .xls"
    :auto-upload="false"
    :on-change="uploadFile"
    :show-file-list="false"
  >
  <el-button type="warning" @click="submitForm">导入商品</el-button>
</el-upload>

提交上传代码的实现

用FormData传文件，FormData提供一种表示表单数据的键值对的构造方式，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

拿到文件数据item.raw，添加到FormData中去——调用append()

uploadFile (item) {
       // 文件的内容在raw 里
        let file = item.raw
        }

       submitForm () {
       // 使用FormData方式提交文件，不然文件流上传会丢失
        let formData = new FormData()
        formData.append('file', this.file)
        this.$http({
          url: ' ', //后端提供的接口
          method: 'post',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(({data}) => {
          this.$alert(data.data)
        })
    }