手动上传和自动上传 elUpload

 项目中需要提供手动上传组件，留一个备份，方便以后的项目使用

<template>
  <div>
    <el-upload
      ref="uploadButton"
      :disabled="disabled"
      action=""
      list-type="picture-card"
      :on-preview="previewFile"
      :on-remove="handleRemove"
      :before-upload="beforeUpload"
      :limit="limit"
      :on-exceed="handleExceed"
      :http-request="uploadFile"
      :on-change="submitFile"
      :on-success="uploadSuccess"
      :auto-upload="false"
      :file-list="fileList"
      :show-file-list="showFile"
    >
      <div><i class="el-icon-plus"></i></div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <span class="notice">图片比例为6:4</span>
  </div>
</template>
<script>
import { fileLimit } from "@/utils";
import request from "@/utils/request";
export default {
  props: {
    httpUrl: {
      // url请求地址
      type: String,
      default: "",
    },
    disabled: {
      // 是否禁用
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1,
    },
    fileType: {
      type: Array,
      default: function () {
        return ["png", "jpg", "jpeg", "bmp", "gif"];
      },
    },
    showFile: {
      type: Boolean,
      default: true,
    },
    uploadNow: {
      // 是否立即上传
      type: Boolean,
      default: true,
    },
    defaultFileList: {
      // 回显列表
      type: Array,
      default: () => [],
    },
  },
  watch: {
    defaultFileList: {
      handler(val) {
        console.log(val, 71);
        if (val.length) {
          this.file = undefined;
          this.fileList = val.map((item) => ({
            url: item,
          }));
        } else {
          this.fileList = [];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      fileList: [],
      file: undefined,
      pic: {},
      dialogVisible: false,
      dialogImageUrl: "",
    };
  },
  methods: {
    beforeUpload(file) {
      const body = fileLimit(file, this.fileType);
      if (body.limit) {
        this.$message.error(body.error);
      }
      return !body.limit;
    },
    previewFile(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitFile(file, fileList) {
      // 获取上传的文件
      this.file = file.raw;
      if (this.uploadNow) {
        this.$refs.uploadButton.submit();
      } else {
        // 把选中的文件外传
        this.$emit("upload-file", this.file);
      }
    },
    uploadFile(params) {
      const form = new FormData();
      form.append("file", this.file);
      request({
        url: this.httpUrl,
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        data: form,
      }).then((res) => {
        console.log(res, 100);
        if (res.url) {
          this.pic = res.url;
          this.fileList.push({ url: this.pic });
          params.onSuccess();
        } else {
          params.onError();
        }
      });
    },
    uploadSuccess() {
      this.$emit("on-success", this.pic);
    },
    handleRemove(file, fileList) {
      this.$emit("on-remove", fileList);
      this.fileList = fileList;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`仅可上传${this.limit}个附件`);
    },
  },
};
</script>
<style scoped>
.notice {
  color: #8e9db4;
}
</style>

//utils.js
// 文件限制
export const fileLimit = (file, fileType = ['pdf']) => {
  const filePost = file.name.substring(file.name.lastIndexOf('.') + 1)
  // 限定文件后缀
  const extension = fileType.findIndex(item => item.toLowerCase().indexOf(filePost.toLowerCase()) > -1)
  // 限定上传文件大小为50MB
  const limit = 50
  const isLimit = file.size / 1024 / 1024 < limit
  if (extension === -1) {
    const fileTypeStr = fileType.join(',')
    return {
      limit: true,
      error: `仅支持上传${fileTypeStr}文件`
    }
  }
  return {
    limit: !isLimit,
    error: `文件大小不超过${limit}MB`
  }
}

如果涉及到文件校验，可以做如下操作:

<template>
  <div>
    <el-form ref="cameraFormRef" :rules="cameraRules" :model="cameraForm">
      <el-form-item label="上传识别图片：" prop="urlAddr">
        <el-input
          v-show="false"
          v-model="cameraForm.urlAddr"
          show-word-limit
        >
        </el-input>
        <UploadPicture
          ref="uploadRef"
          :disabled="cameraDisable"
          :upload-now="false"
          :httpUrl="'common/upload'"
          :defaultFileList="defaultFileList"
          @on-success="succesUpload"
          @on-remove="removeFile"
          @upload-file="uploadFile"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cameraForm: {},
      cameraRules: {
        urlAddr: [{ required: true, message: "请输入", trigger: "change" }],
      },
    };
  },
  methods: {
    //手动选择上传文件触发的事件
    uploadFile(file) {
      this.$set(this.cameraForm, "urlAddr", file); // 为了校验
    },
    //手动删除之后触发的事件
    removeFile(fileList) {
      if (!fileList.length) this.$set(this.cameraForm, "urlAddr", ""); // 为了校验
    },
    // 图片成功提交之后触发（保存流程 就是先保存图片，拿到图片的url，一起作为配置提交）
    succesUpload(urlAddr) {
      this.$set(this.cameraForm, "urlAddr", urlAddr); // 为了校验
      this.defaultFileList = [urlAddr];
    },
  },
};
</script>

参考文章：

el-upload手动上传文件_药引子1的博客-CSDN博客_el-upload 手动上传