vue(element-ui)手动上传

前言：因为element-ui通过action上传不够灵活，后改用其中属性http-request实现自定义上传（http-request： 覆盖默认的上传行为，可以自定义上传的实现）

1.template中加入如下配置：

<el-upload action=""
                     list-type="picture-card"
                     multiple
                     ref="upload_img"
                     accept=".jpg, .jpeg, .png"
                     :on-preview="handlePictureCardPreview"
                     :http-request="handleTestSuccess">
                 <i class="el-icon-plus"></i>
</el-upload>

2.methods加入如下方法

handleTestSuccess(file) {
      // 验证图片格式
      if (file.file.type.indexOf('image') == -1) {
        // 文件格式
        this.$message.error('请上传图片类型的文件')
       //删除上传失败的图片，不然会占位
        this.$refs.upload_img.uploadFiles = this.$refs.upload_img.uploadFiles.filter(
          (item) => {
            return file.file.name != item.name
          }
        )
        return
      }
      //构建一个formData对象，因为这里要求表单类型的数据
      const formData = new FormData()
      formData.append('file', file.file)
      axios
        .post('上传的url地址', formData, {
          headers: {
            //携带的参数
          },
        })
        .then((res) => {
          if (res.status === 200) {
            //数据处理
            this.$message.success('上传检测表附件成功!')
          }
        })
        .catch((err) => {
          //删除上传失败的图片，不然会占位
          this.$refs.upload_img.uploadFiles = this.$refs.upload_img.uploadFiles.filter(
            (item) => {
              return file.file.name != item.name
            }
          )
          this.$message.error('上传失败!')
        })
    },