文件上传有两种方式
1.基于文件处理为文件流然后然后传给服务器，这个我们一般是用form-data来处理的，我们把文件流信息放到form-data里面，把form-data传给我们的服务器。然后服务器拿到form-data相关的数据做处理。
2.客户端需要把文件转化为base64位，转化为base64然后传给服务器，服务器在转化为文件
<template>
<div id="app">
<!--
action:存放的是文件上传到服务器的接口地址
-->
<el-upload drag action="/single1" :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处，或
<em>点击上传</em>
</div>
</el-upload>
<!-- IMG -->
<div class="uploadImg" v-if="img">
<img :src="img" alt />
</div>
</div>
</template>
<script>
/*
* 文件上传有两套方案：
* 1. 基于文件流（form-data） element-ui上传组件默认是基于文件流的
* 2. 客户端需要把文件转化为BASE64
*
* 默认上传
* 格式：multipart/form-data
* 数据格式：form-data
* file 文件流信息
* filename 文件名字
* 上传成功后获取服务器返回信息，通知on-success回调函数执行
* 内部封装了ajax
*/
export default {
name: "App",
data () {
return {
img: null,
};
},
methods: {
handleSuccess (result) {
if (result.code == 0) {
this.img = result.path;
}
},
beforeUpload (file) {
// 格式校验
console.log(file)
let { type, size } = file;
if (!/(png|gif|jpeg|jpg)/i.test(type)) {
this.$message("文件合适不正确~~");
return false;
}
if (size > 200 * 1024 * 1024) {
this.$message("文件过大，请上传小于200MB的文件~~");
return false;
}
return true; //返回true表示上传成功
},
},
};
</script>
案例链接:https://blog.csdn.net/qq_38121975/article/details/105888736?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromBaidu-1.control
vue+ elmentUI实现form表单中文件、图片的上传例子
VUE elementUI 表单上传
在项目开发需求中基于VUE + elementUI在表单实现多张图片和Excel文件上传的需求。
1.图片上传模板
image.png
image.png
image.png
:action，必选参数，上传的地址，String类型。
:accept 文件上传类型
drag是否启用拖拽，
:limit文件或者图片数量限制
multiple 是否支持多选文件
2、常用方法介绍
1、在实现自定义上传的:auto-upload设为"false"时before-upload将会无效，此时如要验证文件类型或者大小此处使用on-change的方法，在on-change方法中判断图片类型、大小，如果符合要求加入到pthotoLists中，不符合则移除
image.png
2、表单点击提交进行验证以及文件自定义上传将文件通过参数传递
image.png
image.png
1、在表单验证通过后开始进行文件的提交，通过自定义的实现方式：http-request="upLoadFIle“”
2、在插入文件前先将表单进行formData（）其作用有两点
1、将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率
image.png
2、异步上传文件
3、通过append方法进行添加文件和数据
image.png
4、pPostFile为接口提交方式相当于axios
action为 提交的地址（接口名称）
formDataObj为表单中提交的所有参数（内容）
hearder即为header中需要的参数
image.png
