vue如何优雅的上传文件

vue如何优雅的上传文件上传文件的方式新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入上传文件的方式下面是我使用

平井缘

20834人浏览 · 2020-08-18 14:50:51

平井缘 · 2020-08-18 14:50:51 发布

vue如何优雅的上传文件

上传文件的方式
- 1.表单提交文件
- 2.Elementui封装的组件提交文件

上传文件的方式

下面是我使用过得两种提交方式，就详细说一下哈
1.表单提交文件
2.Elementui封装的组件提交文件

1.表单提交文件

html页面：

为了页面美观，就把form表单的隐藏啦，用了elementui的按钮触发事件。

<el-button @click="getFile" style="margin-top: 10px">
    <i class="el-icon-upload"></i>&nbsp;{{$i18n.t('CLICK_UPLOAD')}}
</el-button>
<input type="file" ref="file" style="display: none;" v-on:change="handleFileUpload($event)">

提交方法：

重点就是要转成FormData格式啦
在这里插入图片描述
methods里的完整代码：

// 打开文件
getFile () {
    this.$refs.file.click()
},
// 获取文件
handleFileUpload(event){
    // 阻止发生默认行为
    event.preventDefault();
    let formData = new FormData()
    let file = this.$refs.file.files[0]
    formData.append('file',file)
    // console.log(formData.get('file'))
    this.onUpload(formData)
},
// 上传文件
onUpload (formData) {
    postUpload(formData).then((res) => {
        this.mdl.pic = res.result.uri
        this.$message.success(this.$t('UPLOAD_SUCCESS'))
    }).catch((e) => {
        this.$message.error(e.message)
    })
},

axios请求：

os请求都是封装好的，重点就是需要加请求头： headers：{ ‘Content-Type’: ‘multipart/form-data’ }

// 文件上传
export function postUpload (file) {
    return axios({
        url: 'upload',
        method: 'post',
        data: file,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}

处理好FormData和headers，就和普通接口无异啦

2.Elementui封装的组件提交文件

html页面：

<el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    :http-request="onUpload"
>
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

格式判断什么的都在后端写了，前端就单纯上传文件，就没有其他花里胡哨的啦。

action是组件自带，是自动上传得，（但是action是必需得，不使用，为空就好）需要手动上传使用http-request，可自定义事件

官方文档的属性解释说明：

提交方法：

// 上传文件
onUpload (file) {
    let formData = new FormData()
    formData.append('file',file.file)
    postUpload(formData).then((res) => {
       console.log(res)
        this.$message.success(this.$t('UPLOAD_SUCCESS'))
    }).catch((e) => {
        this.$message.error(e.message)
    })
},

axios请求：

// 文件上传
export function postUpload (file) {
    return axios({
        url: 'upload',
        method: 'post',
        data: file,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
}