element-ui在vue中el-upload上传组件提交binary的使用

element-ui在vue中el-upload上传组件提交binary的使用

在文档中可得到如下属性

Attribute

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击文件列表中已上传的文件时的钩子	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

¶Slot

name	说明
trigger	触发文件选择框的内容
tip	提示说明文字

¶Methods

方法名	说明	参数
clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）	—
abort	取消上传请求	（ file: fileList 中的 file 对象 ）
submit	手动上传文件列表	—

为实现与自己的服务器对接，此处使用http-request属性覆盖原有上传方法。

<el-upload
           drag
           multiple
           :before-upload="beforeAvatarUpload"
           :action="uploadurl"
           :data="file"
           :http-request="upload"
           >
    <i class="el-icon-upload" />
    <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
    </div>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

import { upload } from '@/api/file'
export default {
  name: 'FileEngine',
  data() {
    return {
      file: {
        fileName: '',
        filePath: ''
      },
      uploadurl: ''
    }
  },
  mounted() {
    this.uploadurl = process.env.VUE_APP_BASE_API + '/file/upload'
  },
  methods: {
    upload(file) {
      if (!file.data.filePath) file.data.filePath = 'client-sfvue'
      if (!file.data.fileName) file.data.fileName = file.file.filename
      upload(file.data.filePath, file.data.fileName, file)
    },
    beforeAvatarUpload(file) {
      return true
    }
  }
}

upload@/api/file是我们自定义的服务文件上传方法。data是允许在文件上传前传附加信息的属性。

使用binary上传方式

在eleui库中查看upload方法

export default function upload(option) {
  if (typeof XMLHttpRequest === 'undefined') {
    return;
  }

  const xhr = new XMLHttpRequest();
  const action = option.action;

  if (xhr.upload) {
    xhr.upload.onprogress = function progress(e) {
      if (e.total > 0) {
        e.percent = e.loaded / e.total * 100;
      }
      option.onProgress(e);
    };
  }

  const formData = new FormData();

  if (option.data) {
    Object.keys(option.data).forEach(key => {
      formData.append(key, option.data[key]);
    });
  }

  formData.append(option.filename, option.file, option.file.name);

  xhr.onerror = function error(e) {
    option.onError(e);
  };

  xhr.onload = function onload() {
    if (xhr.status < 200 || xhr.status >= 300) {
      return option.onError(getError(action, option, xhr));
    }

    option.onSuccess(getBody(xhr));
  };

  xhr.open('post', action, true);

  if (option.withCredentials && 'withCredentials' in xhr) {
    xhr.withCredentials = true;
  }

  const headers = option.headers || {};

  for (let item in headers) {
    if (headers.hasOwnProperty(item) && headers[item] !== null) {
      xhr.setRequestHeader(item, headers[item]);
    }
  }
  xhr.send(formData);
  return xhr;
}

可得其原生是使用FormData.Append添加了文件

formData.append(option.filename, option.file, option.file.name);

故，我们使用axios传递formdata类型即可:

import request from '../utils/request'

export function upload(filepath, filename, filedata, lastuploadId) {
  var fd = new FormData()
  fd.append('file', filedata)
  fd.append('filepath', filepath)
  fd.append('filename', filename)
  if (lastuploadId != null) {
    fd.append('resumeUploadId', lastuploadId)
  }
  return request.post('file/upload', fd, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}