el-upload的使用及遇到的问题

el-upload效果图如下

在项目中主要遇到2个问题，

1：个是上传后台（后台php）无法接收到；

2：上传的文件格式和大小不支持

第一个问题通过更改上传的headers

  通过设置

headers: { "Content-Type": "multipart/form-data" }  更改为表单上传

export function uploadImg(formData) {
  return request({
    url: "/upload/image",
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data"
    },
    data: formData
  });
}

第2个问题通过 :http-request 自定义上传来覆盖默认的上传

       <el-upload
            v-else
            class="upload-demo"
            drag
            :disabled="canEdit"
            :http-request="myUpload"
            :before-upload="beforeUpload"
            action="http://admin-planet.yongliweb.cn/upload/image"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div
              class="el-upload__tip"
              slot="tip"
            >上传尺寸不得小于200*200，只能是 JPG，png，gif 格式，不得超过2M</div>
          </el-upload>

解决上传，后台接收不到的问题

myUpload(content) {
      let form = new FormData();
      form.append("imageFile", content.file);
      uploadImg(form).then(res => {   //uploadImg为接口
        const data = res.data;
        if (data.code === 200) {
          this.$message({
            message: "上传成功",
            type: "success"
          });
          this.basic.url = data.data.path;
          this.basic.room_main_img_id = data.data.id;
        } else {
          this.$message.error(data.message);
        }
      });
    },

对上传之前做拦截，限制图片格式和图片大小

 beforeUpload(file) {
      let picRule = "image/png,image/jpeg,image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!picRule.includes(file.type)) {
        this.$message.error("上传图片只能是 JPG，png，gif 格式!");
        return;
      }

      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return;
      }
    },