【vue-upload】表单中自定义头像上传，或手动上传

一、自定义上传

使用http-request实现自定义上传 

       <el-form-item prop="imageUrl" label="二维码：">
          <el-upload
            class="avatar-uploader"
            ref="er"
            action="#"
            :show-file-list="false"
            :http-request="Upload"
            :on-change="
              (file, fileList) => {
                change(file, fileList)
              }
            "
          >
            <img v-if="Form.imageUrl" :src="Form.imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

注意：使用自定义上传，on-success无效，所以改用on-change 

export default {
  name: "Form",
  data () {
    return {
      Form: {
        imageUrl: '',//二维码
      },
      formData: new FormData(),
      file: {},//二维码
    };
  },
  created () {
    this.getform()
  },
  methods: {
     // 更新二维码
    Upload (param) {
      this.formData.append("file", param.file);
      upcode(this.formData).then((res) => {
        console.log(res)
        this.Form.imageUrl = res.data
        // this.Form.imageUrl = URL.createObjectURL(param.file)
        this.$message.success(res.message);
      });
    },
    change (file, fileList) {
      const isJPEG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      const isJPG = file.raw.type === 'image/jpg'
      const isGIF = file.raw.type === 'image/GIF'
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!(isJPEG || isPNG || isJPG || isGIF)) {
        this.$message.error('上传图片只能是 JPEG/PNG/JPG/GIF 格式!')
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
  }
}

二、手动上传

使用auto-upload取消立即上传 

        <el-form-item prop="image9" label="拼图9：">
          <el-upload
            class="avatar-uploader"
            ref="image9"
            action="#"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="
              (file, fileList) => {
                change9(file, fileList)
              }
            "
          >
            <img v-if="Form.image9" :src="Form.image9" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="primary" @click="cancel">重置</el-button>
        </el-form-item>

export default {
  name: "Form",
  data () {
    return {
      Form: {
        image9: '',//二维码
      },
      formData: new FormData(),
      file9: {},//二维码
    };
  },
  created () {
    this.getform()
  },
  methods: {
    // 碎片图片9
    change9 (file, fileList) {
      const isJPEG = file.raw.type === 'image/jpeg'
      const isPNG = file.raw.type === 'image/png'
      const isJPG = file.raw.type === 'image/jpg'
      const isGIF = file.raw.type === 'image/GIF'
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!(isJPEG || isPNG || isJPG || isGIF)) {
        this.$message.error('上传图片只能是 JPEG/PNG/JPG/GIF 格式!')
      } else if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
      // console.log(file);
      if (file.status === "ready") {
        this.Form.image9 = URL.createObjectURL(file.raw)
        this.file9 = file.raw
      }
    },
    // 提交
    async onSubmit () {
       this.$refs.Form.validate(async (isok) => {
         if (isok) {
           // 提交编辑
           // console.log(this.Form);
           const res = await setTime(this.Form);//时间
           console.log(res)

          // 拼图9
           this.formData.append("file", this.file9);
           upcode(this.formData).then((res) => {
             console.log(res)
             this.Form.image9 = res.data
           });
           this.$message.success(res.message);
         }
         // this.DetailTaskList();
       });
    },
  }
}