vue elementui实现文件上传

在Vue和ElementUI中实现文件上传需要使用ElementUI中的el-upload组件。首先需要安装ElementUI和相关插件：

1.通过 npm 安装 ElementUI 和 vue-resource：

npm install element-ui --save

npm install vue-resource --save

2.在Vue项目中的main.js文件中引入ElementUI和VueResource：

import Vue from 'vue'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.use(VueResource)

3.在需要上传文件的组件中添加el-upload组件：

<template>
<el-upload
class="upload-demo"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-success="handleSuccess">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">jpg/png 文件，最大支持 2MB</div>
</el-upload>
</template>

其中，headers是文件上传时需要携带的请求头；handlePreview、handleRemove、beforeUpload和handleSuccess是自定义的方法。

4.在组件的script中添加自定义方法：

export default {
data () {
return {
headers: {
Authorization: 'Bearer ' + sessionStorage.getItem('token')
}
}
},
methods: {
handlePreview (file) {
console.log(file)
},
handleRemove (file) {
console.log(file)
},
beforeUpload (file) {
if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
this.$message.error('上传文件只能是jpg或png格式!')
return false
}
if (file.size / 1024 / 1024 > 2) {
this.$message.error('上传文件大小不能超过 2MB!')
return false
}
},
handleSuccess (response, file, fileList) {
console.log(response, file, fileList)
}
}
}

在以上方法中，handlePreview、handleRemove和handleSuccess方法分别是文件预览、文件移除和文件上传成功时触发的方法；beforeUpload方法用于限制文件大小和格式。

5.最后，可以通过el-upload组件的action属性指定文件上传的处理地址：

<el-upload
class="upload-demo"
:headers="headers"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
:on-success="handleSuccess"
action="http://your-upload-url.com">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">jpg/png 文件，最大支持 2MB</div>
</el-upload>