el-upload上传图片/文件用法

首先说一下写这篇文章的目的

是因为感觉elementui的el-upload有两点不好用

1.默认是选择了文件就直接上传到action里面的url地址上的  直接发生请求

2.<el-upload :file-list="fileList"></el-upload> 他的:file-list属性 并不会直接改变数组fileList  也就是你上传了文件以后 你会发现fileList 数组还是空的  :file-list现在一般就是编辑回显的时候才去使用的了

关于第二点 ant design vue 的 <a-upload></a-upload>就更好  选了文件fileList也会跟着变 所见即所得

好了直接讲 el-upload的简单用法

用法1 选了文件以后不自动上传，自己在change事件里面处理 一个一个传给后端或者推到数组里面再整个提交给后端 （el-upload默认是选了文件自动上传的）
<el-upload ref="ocrupimgupload" action="#" :auto-upload="false" :on-change="uploadimgChange"
:file-list="imgfileList">
</el-upload>
// 鉴于el-upload选了文件不会改变imgfileList的值 其实:file-list="imgfileList"可以不要  我一般都是自己去手动处理imgfileList
data () {
    return {
        imgfileList: []
    }
},
methods: {
    uploadimgChange (file, fileList) {
        file是本次选择的文件
        fileList是更新后的文件列表  也就是el-upload里面选择的全部文件
    }
}

用法2 选了文件以后直接上传 但是不推荐在action里面写url上传 因为大部分场景都是需要拼接其他参数调接口
<el-upload ref="ocrupimgupload" action="#" :http-request="httpRequest">
</el-upload>
methods: {
    // http-request	覆盖默认的上传行为，可以自定义上传的实现
    httpRequest (param) {
      // param.file 就是文件信息了 然后自己去请求接口
    },
}

下面是el-upload比较全的代码 包含限制文件个数 限制类型 是否允许一次选择多个文件 可以按需使用

<el-form-item label="设备照片">
    <el-upload ref="ocrupimgupload" action="#" 
        list-type="picture-card"
        :limit="2"
        :multiple="false"
        :on-change="uploadimgChange"
        :on-exceed="shebeiimgExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :auto-upload="false"
        :file-list="imgfileList"
        :before-upload="beforeimglistUpload"
        accept=".jpg,.jpeg,.png,.bmp">
    <i class="el-icon-plus"></i>
    <div slot="tip" class="el-upload__tip">注：自行上传支持jpg,jpeg,png,bmp格式，大小5M以内，限1张</div>
    </el-upload>
</el-form-item>
data () {
    return {
        imgfileList: [],
    }
},
methods: {
    // on-change事件 每次选择文件后触发的事件
    uploadimgChange (file, fileList) {
        this.imgfileList.push(file)
        // 如果需要上传
        let fileFormData = new FormData();
        fileFormData.append('file', file);
        this.$axios({
            method: 'post',
            url: '/deviceinfo/importDeviceInfo',
            headers: {
                'Content-Type': 'multipart/form-data'
            },
            data: fileFormData,
            }).then((res) => {
                // console.log(res);
            })
    },
    // 超出限制提示
    shebeiimgExceed (files, fileList) {
        this.$message.error('设备照片只能上传2张');
    },
    // 点击上传的图片触发的事件  一般用于做预览
    handlePictureCardPreview (file) {
        // 把file.url赋值给预览弹框里面的img标签就好
    },
    // 删除某个已上传的内容
    handleRemove (file, fileList) {
        // console.log(file);
        // 通过查找file在imgfileList的下标手动删除
        // this.imgfileList.splice(index, 1);
    },
    // 图片上传前校验
	beforeimglistUpload (file) {
      if (!this.dirId) { // 如果有业务逻辑 先判断业务逻辑
         this.$message.warning('请选择目录再上传文件!')
         return false; // 不满足业务逻辑直接返回false 返回false就不通过校验 直接不上传
      }
      let isimg = true;
      // 判断文件类型
      if (file.type==='image/jpeg' || file.type==='image/png' || file.type==='image/jpg') {
        isimg = true;
      } else {
        this.$message.error('只能上传' + this.accept + '格式的图片');
        isimg = false;
      }
      // 判断文件大小
	  let isLt2M = file.size / 1024 / 1024 < 5;
	  if (!isLt2M) {
        this.$message.error('图片大小不能超过5MB哦');
        isimg = false;
	  }
	  return isimg;
	},
    // 清除upload所选择的文件
    // this.$refs.ocrupimgupload.clearFiles();
    // 点击其他地方的按钮 触发upload选择文件事件
    // this.$refs["ocrupimgupload"].$refs["upload-inner"].handleClick();
}

如果需求简单 也可以直接复制饿了么官网的推荐示例，我个人比较习惯自己拿到file后自己去封装参数调接口，更方便贴合业务需求