upload图片上传参数需要的图片file类型

个人学习笔记备忘录 

上传图片，接口所需的参数类型为file

<el-dialog
        class="dialogBox"
        :title="title"
        :visible.sync="QrDialogVisible"
        :before-close="resetForm"
        :close-on-click-modal="false"
        width="50%"
        :style="{'min-width':'1500px'}"
      >
        <el-form label-width="auto" :model="form" ref="FormRef" :rules="rules">
          <el-form-item label="生成数量:" prop="count">
            <el-input-number
              style="width: 100%"
              v-model="form.count"
              :min="1"
              :max="1000"
              :controls="false"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="链接:" prop="url">
            <el-input
              placeholder="请输入..."
              v-model="form.url"
            ></el-input>
          </el-form-item>
          <el-form-item label="Logo图片:" prop="logo">
            <template>
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </template>
          </el-form-item>
          <div class="text-c mb-50">
            <el-button @click="cancelFn">取 消</el-button>
            <el-button type="primary" @click="submitFn">确 定</el-button>
          </div>
        </el-form>
</el-dialog>

handleAvatarSuccess(res, file, fileList) {
      this.form.logo = file.raw;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpg 格式 或 png格式!");
      }
      // 检查图片尺寸
      const checkImageSize = file => {
        let _that = this;
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = function(e) {
            const img = new Image();
            img.src = e.target.result;
            img.onload = function() {
              const is120x120 = img.width === 120 && img.height === 120;
              if (!is120x120) {
                _that.$message.error("上传头像图片尺寸必须是 120px * 120px!");
                reject(false);
              } else {
                resolve(true);
              }
              resolve(is120x120);
            }.bind(_that);
          };
        });
      };
      return isJPG && checkImageSize(file).catch(() => false);
    },
   submitFn() {
      this.$refs.FormRef.validate(async valid => {
        if (valid) {
          const formData = new FormData();
          formData.append("count", this.form.count);
          formData.append("url", this.form.url);
          formData.append("logo", this.form.logo); // 直接添加文件对象
          let resetRes = await CreateQrApi(formData);
          if (!resetRes) return;
          if (resetRes.code == 200) {
            this.$message.success("生成成功");
            this.QrDialogVisible = false;
            this.$refs.FormRef.resetFields();
          }
        }
      });
    }

注意点:
1:uploadUrl地址填的当前需要上传这些参数的接口
2:file类型  应该直接使用文件对象，而不是读取文件的内容。
3:FormData的形式发送到后端。因为需要上传文件，所以需要使用FormData对象