element上传图片 可预览

第一次看到element ui中的上传图片时，可能因为好看的ui惊喜了一下下
但是问题出现了，这些上传大多都是自动上传，而且是一个文件一个文件上传，所以为了解决一下问题

1. 一次上传多张
2. 手动上传图片
3. 图片预览问题

• :limit="limit" 限制上传图片的数量
• list-type="picture-card" 设置上传样式
• :on-preview="handlePictureCardPreview" 利用该事件来获得图片信息，完成图片预览
• :on-change="OnChange" 在选择好文件的时候对文件进行校验，并将文件push到dataForm.imgFileList中（因为el-upload 中:file-list="dataForm.imgFileList"并没有实现双向绑定，所以需要手动进行）
• :on-remove="handleRemove" 因为el-upload 中:file-list="dataForm.imgFileList"并没有实现双向绑定，所以需要手动进行删除
• submitUpload 手动点击上传图片到服务器

需要注意的是我们要let formData = new FormData();
将文件信息添加进去，然后进行上传请求。
需要在请求的头部加入

headers: {
          "Content-Type": "multipart/form-data",
        },

具体代码

<el-form size="mini" :model="dataForm" ref="dataForm" label-width="80px">
        <el-form-item :class="{ hide: hideUpload }">
          <el-upload
            ref="upload"
            action="#"
            multiple
            :limit="limit"
            :file-list="dataForm.imgFileList"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-change="OnChange"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            accept="image/jpeg,image/png"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
            <div class="el-upload__tip" slot="tip">
              只能上传jpg/png文件，最多上传5张且单张图片不超过5M
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitUpload()">确定</el-button>
        </el-form-item>
      </el-form>

<script>
import projectApi from "@/api/project/project";
export default {
  data() {
    return {
      dataForm: {
        imgFileList: [],
      },

      //图片上传的参数
      visible: false,
      uploadUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      limit: 5,
      hideUpload: false, //是否显示上传图片的加号
      deleteImgFileList: [], //存已被删除了的图片的id
    };
  },
  mounted() {},
  methods: {
    //点击上传图片
    submitUpload() {
      let formData = new FormData(); //  用FormData存放上传文件
      this.dataForm.imgFileList.forEach((file) => {
        console.log(file.raw);
        console.log(file.size);
        formData.append("file", file.raw);
      });
		// 以下代码可以根据实际情况自己来实现
      this.$http({
        url: this.uploadUrl,
        method: "post",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // for (var i = 0; i < data.imgNameList.length; i++) {
          //   this.imgNameList.push(data.imgNameList[i].name);
          //   this.imgSize.push(data.imgNameList[i].size);
          // }
          // this.dataFormSubmit();
          // 上传其他表格信息
          this.$refs.upload.clearFiles();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //预览图片时
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    OnChange(file, fileList) {
      // const isType = file.type === "image/jpeg" || "image/png";
      const isLt100M = file.size / 1024 / 1024 < 1024;

      // if (!isType) {
      //   this.$message.error("上传头像图片只能是 JPG 格式!");
      //   fileList.pop();
      // }
      if (!isLt100M) {
        this.$message.error("请检查，上传文件大小不能超过1G!");
        fileList.pop();
      }
      this.dataForm.imgFileList.push(file);
      this.hideUpload = fileList.length >= this.limit;
    },
    //删除图片时
    handleRemove(file, fileList) {
      if (file.id) {
        console.log("删除了已被上传过的图片");
        console.log(file.id);
        this.deleteImgFileList.push(file.id);
      }
      this.dataForm.imgFileList = fileList;
      this.hideUpload = fileList.length >= this.limit;
    },
    //文件超出个数限制时
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
};
</script>

当文件的个数超出限制时将“+”隐藏

<style scoped>
.hide >>> .el-upload--picture-card {
  display: none;
}
</style>