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

文档中可得到如下属性

Attribute

参数说明类型可选值默认值
action必选参数,上传的地址string
headers设置上传的请求头部object
multiple是否支持多选文件boolean
data上传时附带的额外参数object
name上传的文件字段名stringfile
with-credentials支持发送 cookie 凭证信息booleanfalse
show-file-list是否显示已上传文件列表booleantrue
drag是否启用拖拽上传booleanfalse
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文件列表的类型stringtext/picture/picture-cardtext
auto-upload是否在选取文件后立即进行上传booleantrue
file-list上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]array[]
http-request覆盖默认的上传行为,可以自定义上传的实现function
disabled是否禁用booleanfalse
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'
    }
  })
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KS8LUpZ7-1584512942919)(element-ui%E5%9C%A8vue%E4%B8%ADel-upload%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8.assets/image-20200318142743967.png)]

Logo

前往低代码交流专区

更多推荐