element 关于Upload 上传功能

element 关于Upload 上传功能，之前一直没有接触过，也不知道咋写，慢慢摸索…

首先是接口地址

//

// HTML代码
    <el-form-item
            label="上传照片"
            prop="busLicensePic"
          >
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="action()"  
              :before-upload="beforeUpload"  
              :on-preview="handlePreview"  
              list-type="picture-card"   
              :data="itemForm"        
              :on-error="error"      
              :on-success="successResave" 
              :on-remove="handleRemove"      //移除
              :file-list="fileList"     
              :show-file-list="true"     
              :disabled="isDisabled"  
            >
              <el-button
                size="small"
                type="primary"
              >点击上传</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >
                1、支持的图片格式：BMP、TIFF、GIF、PNG、JPEG <br>

                2、文件大小应该小于100KB <br>

                3、可一次选择多张照片上传、上传的图片数量最多20张

                文本框、必填、由1-18个英文、数字字符组成 <br>

                4、可上传法人身份证正反面、营业热照等 <br>

              </div>
            </el-upload>

//这个是data里面接的参数
data(){
return {
itemForm: {
        bucketName: 'customs',
        expires: '10000',
        perfixName: '2',
      },
  fd: '', //向服务器进行传递的参数（带有图片formdata）
}

//然后这个是那个methods里的方法
methods:{
action() {  
      return 'http://192.***.*.***:****/customs/upload/file'   //
    },
      // 预览
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log(file)
    },
    // 图片上传
    fileUp() {   
      // debugger
      uploadFile(this.fd).then((response) => {   
        if (response) { 
          this.$message({
            showClose: true,
            type: 'success',
            message: '设置成功',
          })
          // this.initPage()
        }
        console.log(response, '图片上传成功')
        // this.dialogImageUrl = file.url
        // console.log(this.dialogImageUrl)
      })
    },
   
    beforeUpload(file) {
      // debugger
      const isJPG =
        file.type == 'image/jpeg' ||
        file.type == 'image/png' ||
        file.type == 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.warning('上传头像图片只能是 JPG/PNG/GIF 格式!')
        return isJPG
      }
      if (!isLt2M) {
        this.$message.warning('上传头像图片大小不能超过 2MB!')
        return isLt2M
      }
      this.multfileImg = file
      // return isJPG && isLt2M
      this.fd = new FormData()  //
      //   //传其他参数
      this.fd.append('bucketName', this.itemForm.bucketName)
      this.fd.append('expires', this.itemForm.expires)
      this.fd.append('perfixName', this.itemForm.perfixName)
      this.fd.append('upfile', file)
      this.fileUp()
    },
     successResave(res, file) {
      this.itemForm.upfile = URL.createObjectURL(file.raw)
    },
    //失败钩子
    error(response, file, fileList) {
      console.log(response)
    },
// 移除
 handleRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
      console.log(file)
    },
}